。append()，prepend()，。在()和之后。之前()

Question

我非常精通编码，但偶尔我会遇到似乎做基本相同事情的代码。我在这里的主要问题是，为什么你会使用 .append（） 而不是 .after（） 或 vice ？

我一直在寻找，似乎找不到两者之间区别的明确定义，以及何时使用它们，何时不使用它们。

一个比另一个有什么好处，为什么我要使用一个而不是另一个？？有人能给我解释一下吗？

var txt = $('#' + id + ' span:first').html();
$('#' + id + ' a.append').live('click', function (e) {
    e.preventDefault();
    $('#' + id + ' .innerDiv').append(txt);
});
$('#' + id + ' a.prepend').live('click', function (e) {
    e.preventDefault();
    $('#' + id + ' .innerDiv').prepend(txt);
});
$('#' + id + ' a.after').live('click', function (e) {
    e.preventDefault();
    $('#' + id + ' .innerDiv').after(txt);
});
$('#' + id + ' a.before').live('click', function (e) {
    e.preventDefault();
    $('#' + id + ' .innerDiv').before(txt);
});

Answer 1

< code>append()

Answer 2

下图给出了清晰的理解，并显示了之间的确切区别。append（），。prepend（），。after（）和.before（）

从图中可以看出< code >。append()和< code >。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>'))

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

Answer 3

<代码>。append()将数据放入< code >最后一个索引和< br> 处的元素中。prepend()将前置元素放在< code >第一个索引处

<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').prepend($('.c'));

执行后：

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

.后（）将元素放在元素之后
.前（）将元素放在元素之前

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

执行后：

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

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

执行后：

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