See:

---

.append()将数据放在最后一个索引和元素中 .prepend()将前面的elem放在第一个索引

---

假设:

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

当.append()执行时，它看起来像这样:

$('.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>

---

在执行时修改.append()。

---

当.prepend()执行时，它看起来像这样:

$('.a').prepend($('.c'));

执行后:

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

---

在执行时修改.prepend()。

---

.after()将元素放在元素的后面 .before()将元素放在元素之前

---

使用后:

$('.a').after($('.c'));

执行后:

<div class='a'>
  <div class='b'>b</div>
</div>
<div class='c'>c</div> //<----this will be placed here

---

在执行时修改.after()。

---

使用前:

$('.a').before($('.c'));

执行后:

<div class='c'>c</div> //<----this will be placed here
<div class='a'>
  <div class='b'>b</div>
</div>

---

在执行时摆弄.before()。

---

最好的方法是使用文档。

.append() vs .after()

.append():将参数指定的内容插入到匹配元素集中每个元素的末尾。 .after():在匹配元素集的每个元素之后插入由参数指定的内容。

.prepend() vs .before()

prepend():将参数指定的内容插入到匹配元素集中每个元素的开头。 .before():在匹配元素集的每个元素之前插入由参数指定的内容。

append和prepend指的是对象的子对象而after和before指的是对象的兄弟对象。

在.append()和.after()以及.prepend()和.before()之间有一个基本的区别。

.append()将参数元素添加到选择器元素的标签内，而.after()将参数元素添加到元素的标签后。

反之亦然，对于.prepend()和.before()。

小提琴

<div></div>    
// <-- $(".root").before("<div></div>");
<div class="root">
  // <-- $(".root").prepend("<div></div>");
  <div></div>
  // <-- $(".root").append("<div></div>");
</div>
// <-- $(".root").after("<div></div>");
<div></div>    

下面显示的这张图像可以清晰地理解和显示.append()， .prepend()， .after()和.before()之间的确切区别。

从图中可以看到.append()和.prepend()将新元素作为子元素(棕色)添加到目标。

.after()和.before()将新元素作为兄弟元素(黑色)添加到目标中。

为了更好地理解，这里有一个演示。

---

编辑:这些函数的翻转版本:

使用以下代码:

var $target = $('.target');

$target.append('<div class="child">1. append</div>');
$target.prepend('<div class="child">2. prepend</div>');
$target.before('<div class="sibling">3. before</div>');
$target.after('<div class="sibling">4. after</div>');

$('<div class="child flipped">or appendTo</div>').appendTo($target);
$('<div class="child flipped">or prependTo</div>').prependTo($target);
$('<div class="sibling flipped">or insertBefore</div>').insertBefore($target);
$('<div class="sibling flipped">or insertAfter</div>').insertAfter($target);

在这个目标上:

<div class="target">
    This is the target div to which new elements are associated using jQuery
</div>

---

因此，尽管这些函数颠倒了形参顺序，但每个函数都创建了相同的元素嵌套:

var $div = $('<div>').append($('<img>'));
var $img = $('<img>').appendTo($('<div>'))

.．.但是它们返回一个不同的元素。这对方法链接很重要。

把DOM (HTML页面)想象成一棵树。HTML元素是这个树的节点。

append()将一个新节点添加到您调用它的节点的子节点。

Example:$("#mydiv").append("<p>Hello there</p>") 

creates a child node <p> to <div>

after()将一个新节点作为同级或子节点添加到所调用节点的父节点。