jQuery中 append()/prepend() 和 after()/before() 的异同

jQuery添加DOM元素方法：

• 在指定位置之前添加内容可以使用 prepend()或者before()
• 在指定位置之后添加元素可以使用 append()或者after()

本来以为只是相同的实现效果的两种不同方式，结果尝试后，发现两组方法在代码格式上有着细微的不同之处。以下代码片段是通过控制台看的。

依次对比：

1、在 div 元素上，使用 append() 方法，来添加 DOM元素

$("div").append("<p>这是被插入的段落</p>");

=》控制台效果：

<h1>标题一</h1>
<div>
<p>一个段落</p>
<p>这是被插入的段落</p>
</div>
// 可以观察到，append()方法是在 div 元素内部的最后面添加了<p>这是被插入的段落</p>

2、使用 after() 方法在 div 元素后面追加

$("div").after("<p>这是被插入的段落</p>");

=》控制台效果:

<h1>标题一</h1>
<div>
<p>一个段落</p>
</div>
<p>这是被插入的段落</p>
</div>
// 可以观察到，after()方法是在 div 元素后面(div外部),添加了 <p>这是被插入的段落</p>

3、在 div元素上使用 prepend()方法

$("div").prepend("<p>这是被插入的段落</p>");

=》控制台效果

<h1>标题一</h1>
<div>
<p>这是插入的段落</p>
<p>一个段落</p>
</div>
// 可以观察到，prepend()方法是在 div 元素内部的最前面添加了<p>这是被插入的段落</p>

4、使用before()方法在元素之前嵌入的效果：

$("div").before("<p>这是被插入的段落</p>");

=》控制台效果

<h1>标题一</h1>
<p>这是插入的段落</p>
<div>
<p>这是一个段落</p>
</div>
// 可以观察到，before()方法是在 div 的外部、div 的前面添加<p>这是被插入的段落</p>

总结：

• 使用 append() 是在 $(“tag”) 内部的最后面嵌入的，
• 使用 prepend() 是在 $(“tag”)内部的最前面嵌入的。
• 使用before() 是在 $(“tag”) 外部的前面添加的DOM元素。
• 使用after()是在 $(“tag”) 外部的后面添加的DOM元素。

虽然其实现的效果是相同的，但从代码层面上来看，其顺序有差异。