首页 >web前端 >js教程 >jQuery中DOM节点操作方法总结

jQuery中DOM节点操作方法总结

小云云原创: 2018-01-24 15:40:031619浏览

本文主要介绍了jQuery中 DOM节点操作方法大全，感兴趣的朋友一起看看吧，希望能帮助大家更好的学习jQuery中DOM节点操作方法。

append(content | fn)：向每个匹配的元素内部追加内容。

例如：向所有段落中追加一些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>
<p></p><p></p>
$("p").appendTo("p");
<p><p>I would like to say: </p></p>
<p><p>I would like to say: </p></p>

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><p id="foo"></p>
$("p").prependTo("#foo");
<p id="foo"><p>I would like to say: </p></p>

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><p id="foo">Hello</p>
$("p").insertAfter("#foo");
<p id="foo">Hello</p><p>I would like to say: </p>

insertBefore()：把所有匹配的元素插入到另一个、指定的元素元素集合的前面。实际上，使用这个方法是颠倒了常规的$(A).before(B)的操作，即不是把B插入到A前面，而是把A插入到B前面。

例如：把所有段落插入到一个元素之前。与 $("#foo").before("p")相同。

<p id="foo">Hello</p><p>I would like to say: </p>
$("p").insertBefore("#foo");
<p>I would like to say: </p><p id="foo">Hello</p>

wrap()：把所有匹配的元素用其他元素的结构化标记包裹起来。

这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。这个函数的原理是检查提供的第一个元素（它是由所提供的HTML标记代码动态生成的），并在它的代码结构中找到最上层的祖先元素－－这个祖先元素就是包裹元素。当HTML标记代码中的元素包含文本时无法使用这个函数。因此，如果要添加文本应该在包裹完成之后再行添加。

例如：用于包装目标元素的DOM元素

<p class="container">
 <p class="inner">Hello</p>
 <p class="inner">Goodbye</p>
</p>
$('.inner').wrap(function() {
 return '<p class="&#39; + $(this).text() + &#39;" />';
});
<p class="container">
 <p class="Hello">
  <p class="inner">Hello</p>
 </p>
 <p class="Goodbye">
  <p class="inner">Goodbye</p>
 </p>
</p>

unwrap()：这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。匹配的元素（以及他们的同辈元素）会在DOM结构上替换他们的父元素。

例如：用ID是"content"的p将每一个段落包裹起来

<p>
  <p>Hello</p>
  <p>cruel</p>
  <p>World</p>
</p>
$("p").unwrap()
<p>Hello</p>
<p>cruel</p>
<p>World</p>

wrapAll()：将所有匹配的元素用单个元素包裹起来

这于 '.wrap()' 是不同的，'.wrap()'为每一个匹配的元素都包裹一次。这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。这个函数的原理是检查提供的第一个元素并在它的代码结构中找到最上层的祖先元素－－这个祖先元素就是包装元素。

例如：用一个生成的p将所有段落包裹起来

$("p").wrapAll("<p></p>");

或者

$("p").wrapAll(document.createElement("p"));

jQuery中DOM节点操作方法总结

相关文章