当前位置：首页 > 全部内容 > jQuery DOM节点操作详解：append、wrap等常用方法

jQuery DOM节点操作详解：append、wrap等常用方法

作者：像素漫游时间：2026-10-22 09:08:39浏览：483

本文详细介绍jQuery中DOM节点操作的核心方法，包括append、appendTo、prepend、prependTo、after、before、insertAfter、insertBefore以及wrap、unwrap和wrapAll。通过具体示例解析各方法的语法、参数及执行逻辑，帮助开发者掌握元素内容的追加、前置、插入及包裹技巧，提升前端开发效率。

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>

jQuery DOM节点插入操作

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>

jQuery DOM节点包裹操作

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()' 不同，'.wrap()' 会为每个匹配的元素分别包裹一次。这种包装方式对于在文档中插入额外的结构化标记非常有用，且不会破坏原始文档的语义结构。该函数的原理是检查提供的第一个元素，并在其代码结构中找到最上层的祖先元素，该祖先元素即为包裹元素。

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


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

或者


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

总结

以上所述是小编给大家介绍的jQuery中 DOM节点操作方法大全，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！

作者最新文章

D3.js 处理大规模数据点的性能优化策略

2026-11-05 15:37:25

JS实现网页摄像头实时扫码：结合getUserMedia与jsQR教程

2026-11-05 15:27:28

D3.js v5 迁移到 v7 的 API 变更与注意事项

2026-11-05 11:57:17

使用 animate.js 实现多元素协同的序列动画

2026-11-04 22:27:53

JS拖拽排序时怎么添加平滑动画效果？FLIP技术实战

2026-11-04 10:12:22