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节点操作方法大全，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
列举所有的方式，看看各浏览器的支持差异。方便用js动态设置元素css的代码。需要的朋友可以参考下。2011-08-08
javascript 读取内联之外的样式(style、currentStyle、getComputedStyle区别介绍
最常用的是style属性，在JavaScript中，通过document.getElementById(id).style.XXX就可以获取到XXX的值，但意外的是，这样做只能取到通过内嵌方式设置的样式值，即style属性里面设置的值。2010-05-05
在项目中遇到表单似的页面，需要进行增加一行和减少一行的操作，基于ionic怎么实现呢？下面小编给大家分享ionic中列表项增加和删除的实现方法，一起看看吧2017-01-01
详解JavaScript 中getElementsByName在IE中的注意事项
这篇文章主要介绍了详解JavaScript 中getElementsByName在IE中的注意事项的相关资料,需要的朋友可以参考下2017-02-02
这篇文章主要介绍了js+html5生成自动排列对话框实例，弹出多个对话框，可以自动排列，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
关于使用runtimeStyle属性问题讨论文章...2007-03-03
JavaScript提供了一个RegExp对象来完成有关正则表达式的操作和功能，每一条正则表达式模式对应一个RegExp实例2012-11-11
这篇文章主要介绍了JavaScript简单下拉菜单,采用JavaScript定时函数递归调用实现菜单渐显效果,非常简单实用,需要的朋友可以参考下2015-09-09
下面小编就为大家分享一篇基于JavaScript中标识符的命名规则介绍，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了关于d3.js数据绑定的相关资料，文中通过示例代码介绍的非常详细，对大家学习只d3.js具有一定的参考价值，需要的朋友下面来一起看看吧。2017-04-04
最新评论