jQuery中 DOM节点操作方法大全
append(content | fn)：向每个匹配的元素内部追加内容。参考：http://jquery.cuishifeng.cn/append.html
例如：向所有段落中追加一些HTML标记。
<p>I would like to say: </p>
$("p").append("<b>Hello</b>");
[ <p>I would like to say: <b>Hello</b></p> ]
appendTo()：这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中
例如：把所有段落追加到ID值为foo的元素中。
<p>I would like to say: </p>
<div></div><div></div>
$("p").appendTo("div");
<div><p>I would like to say: </p></div>
<div><p>I would like to say: </p></div>
prepend()：向每个匹配的元素内部前置内容
例如：向所有段落中前置一些HTML标记代码。
<p>I would like to say: </p>
$("p").prepend("<b>Hello</b>");
[ <p><b>Hello</b>I would like to say: </p> ]
prependTo(content)：
把所有匹配的元素前置到另一个、指定的元素元素集合中。实际上，使用这个方法是颠倒了常规的$(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中。
例如：把所有段落追加到ID值为foo的元素中。
<p>I would like to say: </p><div id="foo"></div>
$("p").prependTo("#foo");
<div id="foo"><p>I would like to say: </p></div>
after()：在每个匹配的元素之后插入内容。插入的元素和被插入的元素属于同一级，非父子级关系
例如：在所有段落之后插入一些HTML标记代码。
<p>I would like to say: </p>
$("p").after("<b>Hello</b>");
<p>I would like to say: </p><b>Hello</b>
before()：在每个匹配的元素之前插入内容。
例如：在所有段落之前插入一些HTML标记代码
<p>I would like to say: </p>
$("p").before("<b>Hello</b>");
[ <b>Hello</b><p>I would like to say: </p> ]
insertAfter()：把所有匹配的元素插入到另一个、指定的元素元素集合的后面。实际上，使用这个方法是颠倒了常规的$(A).after(B)的操作，即不是把B插入到A后面，而是把A插入到B后面
例如：把所有段落插入到一个元素之后。与 $("#foo").after("p")相同
<p>I would like to say: </p><div id="foo">Hello</div>
$("p").insertAfter("#foo");
<div id="foo">Hello</div><p>I would like to say: </p>
insertBefore()：把所有匹配的元素插入到另一个、指定的元素元素集合的前面。实际上，使用这个方法是颠倒了常规的$(A).before(B)的操作，即不是把B插入到A前面，而是把A插入到B前面。
例如：把所有段落插入到一个元素之前。与 $("#foo").before("p")相同。
<div id="foo">Hello</div><p>I would like to say: </p>
$("p").insertBefore("#foo");
<p>I would like to say: </p><div id="foo">Hello</div>
wrap()：把所有匹配的元素用其他元素的结构化标记包裹起来。
这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。这个函数的原理是检查提供的第一个元素（它是由所提供的HTML标记代码动态生成的），并在它的代码结构中找到最上层的祖先元素－－这个祖先元素就是包裹元素。当HTML标记代码中的元素包含文本时无法使用这个函数。因此，如果要添加文本应该在包裹完成之后再行添加。
例如：用于包装目标元素的DOM元素
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
$('.inner').wrap(function() {
return '<div class="' + $(this).text() + '" />';
});
<div class="container">
<div class="Hello">
<div class="inner">Hello</div>
</div>
<div class="Goodbye">
<div class="inner">Goodbye</div>
</div>
</div>
unwrap()：这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。匹配的元素（以及他们的同辈元素）会在DOM结构上替换他们的父元素。
例如：用ID是"content"的div将每一个段落包裹起来
<div>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
</div>
$("p").unwrap()
<p>Hello</p>
<p>cruel</p>
<p>World</p>
wrapAll()：将所有匹配的元素用单个元素包裹起来
这于 '.wrap()'<a href="http://docs.jquery.com/Manipulation/wrap" title="Manipulation/wrap"></a> 是不同的，'.wrap()'为每一个匹配的元素都包裹一次。这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。这个函数的原理是检查提供的第一个元素并在它的代码结构中找到最上层的祖先元素－－这个祖先元素就是包装元素。
例如：用一个生成的div将所有段落包裹起来
$("p").wrapAll("<div></div>");
或者
$("p").wrapAll(document.createElement("div"));
总结
以上所述是小编给大家介绍的jQuery中 DOM节点操作方法大全，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
Bootstrap 3.x打印预览背景色与文字显示异常的解决
前几天同事有个问题咨询我，他在调用print()来打印页面，发现打印预览页面上的背景色无法显示以及文字总是显示为黑色，感觉非常奇怪，我通过测试发现是Bootstrap的问题，现在将解决的方法分享给大家，希望可以帮助到同样遇到这个问题的朋友们，下面来一起看看。2016-11-11
下面小编就为大家带来一篇归纳下js面向对象的几种常见写法总结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
JavaScript中async await更优雅的错误处理方式
async/await中的异常处理很让人混乱,尽管有很多种方式来应对async 函数的异常,但是连经验丰富的开发者有时候也会搞错,所以这篇文章主要给大家介绍了关于JavaScript中async await更优雅的错误处理方式的相关资料,需要的朋友可以参考下2021-09-09
原生js实现改变随意改变div属性style的名称和值的结果
在本文将为大家介绍下如何用原生js和jQuery实现随意改变div属性，和重置，具体实现如下，感兴趣的朋友可以参考下，希望对大家有所帮助2013-09-09
这篇文章主要为大家详细介绍了JavaScript实现圆形进度条效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了原生javascript获取元素样式的方法,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了js传各种类型参数到Controller层的整理方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
这篇文章主要为大家详细介绍了JavaScript实现简单计算器小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
下面小编就为大家带来一篇JS验证 只能输入小数点,数字,负数的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
这篇文章主要介绍了JS连接SQL数据库与ACCESS数据库的方法实例，有需要的朋友可以参考一下2013-11-11
最新评论