JQuery中append、prepend, before和after方法的区别

原创于 2018-08-06 16:47:24 发布 · 335 阅读

CC 4.0 BY-SA版权

26 篇文章

订阅专栏

本文介绍了jQuery中用于元素插入的四个核心方法：append(), prepend(), after() 和 before() 的使用方式及区别。通过示例展示了如何在选定元素内部或外部插入内容。

四个 jQuery 方法：

假设处理前代码：

<div class='a'> //<---you want div c to append in this
  <div class='b'>b</div>
</div>

使用：$('.a').append($('.c')); 效果如下：

<div class='a'> //<---you want div c to append in this
  <div class='b'>b</div>
  <div class='c'>c</div>
</div>

使用：$('.a').after($('.c')); 效果如下：

<div class='a'>
  <div class='b'>b</div>
</div>
<div class='c'>c</div>

总结：append() & prepend()是在元素内插入内容（该内容变成该元素的子元素或节点），after() & before()是在元素的外面插入内容（其内容变成元素的兄弟节点）。