看：

.append()在放数据的元素内部last index和
.prepend()放预先挂起ELEM在first index

认为：

<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()，.prepend()，.after()和.before()

您可以从图像中看到.append()，.prepend()并将新元素作为子元素（棕色）添加到目标中。

而.after()和.before()添加新的元素作为同级元素（黑色彩色）的目标。

这是一个DEMO，以便更好地理解。

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

使用此代码：

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>'))

...但它们返回不同的元素。这对于方法链很重要。

append()&prepend()用于在元素内部插入内容（使内容成为其子元素）而after()&before()在元素外部插入内容（使内容成为其兄弟）。

最好的方法是去文档。

.append() 对比 .after()

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

.prepend() 对比 .before()

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

因此，append 和 prepend 是指对象的子级，而 after 和 before 是指对象的兄弟级。

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

.append()添加参数元素选择元素的标签内的最末端，而.after()添加参数元素的元素的标签之后。

该反之亦然是.prepend()和.before()。

小提琴