.append（）、prepend（）、.after（） 和 .before（）

看：

.append()将数据放在元素内，并将
前面的 elem 放在last index.prepend()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()

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

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

使用此代码：

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

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