.append(), prepend(), .after() and .before()

Question

我对编码相当熟练，但有时候我会遇到似乎可以做基本相同事情的代码。我的主要问题是，为什么要使用.append()而不是.after()或反之亦然？

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

一个方法比另一个更有优势吗？此外，为什么我要使用其中一个而不是另一个？请问有人能解释一下吗？

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);
});

- Epik

---

我从不使用append，因为它会导致ie浏览器出现错误，我使用appendTo，这在语义上似乎更加正确，特别是因为有after（链式调用）- 注意：after是在之后而不是在内部。 - mikakun

听起来你真正想知道的是为什么选择append而不是after来实现相同的结果。假设你有<div class='a'><p class='b'></p></div>。那么$('.a').append ('hello')与$('.b').after('hello')会产生相同的效果。即：<div class='a'><p class='b'></p>'hello'</div>。在这种情况下，没有关系。生成的HTML是相同的，因此根据您的代码中最方便构造的选择器选择append或after。 - tgoneil

Answer 1

参考：

---

.append() 将数据放置在元素的最后一个索引处，
.prepend() 将数据放置在元素的第一个索引处。

---

假设：

<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() 的 Fiddle 示例。

---

当执行.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>

---

Fiddle with .prepend() in execution.

---

.after()将元素放置在另一个元素之后
.before()将元素放置在另一个元素之前

---

使用after:

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

执行后：

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

---

演示使用.after()函数

---

使用.before()函数:

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

执行后：

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

---

执行中使用 .before() 的代码演示

---

- Jai

---

@joraid 根据您的评论更新了答案，并提供了一些 js fiddle 链接以供执行。 - Jai

很好的解释，但如果我想加载外部HTML视图怎么办？ 使用MVC如下：$("#viewPlaceHolder").append("/clients/RelationDropdown", {selected: selected }); - Djeroen

.append()无法以那种方式加载。你需要使用.load(url, params)。 - Jai

不错！我也可以问一下“$(element).append(content)”和“$(content).appendTo(target)”之间的区别，类似这样的问题吗？（我不想在新的主题中开始讨论！） - Apostolos

当你得到像这样的答案（_解释得很好_）时，你可以喘口气了！ - Irf

当你得到像这样的答案（_解释得很好_）时，你就可以松口气了！ - undefined

Answer 2

下面展示的图片清晰地展示了.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>'))

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

- VSri58

---

非常容易理解的图片。 :) - Abdul Hameed

点赞！如果我问一下图片中的appendTo和prependTo呢？请更新。 - user7200829

我一直在参考你的信息图。希望你喜欢翻转函数的添加。 - Bob Stein

Answer 3

append()和prepend()用于将内容插入元素内（使其成为子元素），而after()和before()则用于将内容插入元素外（使其成为同级元素）。

- alijsh

Answer 4

最好的方法是查看文档。

.append() vs .after()

• .append(): 将参数中指定的内容插入到匹配元素集合末尾的位置。
• .after(): 将参数中指定的内容插入到匹配元素集合后面的位置。

.prepend() vs .before()

• prepend(): 将参数中指定的内容插入到匹配元素集合开头的位置。
• .before(): 将参数中指定的内容插入到匹配元素集合前面的位置。

因此，在对象中，append和prepend是指孩子节点，而after和before是指同级节点。

- Ionică Bizău

Answer 5

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

.append()将参数元素插入到选择器元素标记的末尾，而.after()将参数元素插入到元素标记之后。

.prepend()和.before()的情况则相反。

Fiddle链接

- I_Debug_Everything

Answer 6

在它们之间没有额外的优势，完全取决于你的情况。下面的代码展示了它们之间的区别。

    Before inserts your html here
<div id="mainTabsDiv">
    Prepend inserts your html here
    <div id="homeTabDiv">
        <span>
            Home
        </span>
    </div>
    <div id="aboutUsTabDiv">
        <span>
            About Us
        </span>
    </div>
    <div id="contactUsTabDiv">
        <span>
            Contact Us
        </span>
    </div>
    Append inserts your html here
</div>
After inserts your html here

- Code.Town

Answer 7

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

- Nate

Answer 8

想象一下DOM（HTML页面）是一棵树。HTML元素是这棵树的节点。 append()函数将一个新节点添加到您调用它的节点的子级中。

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

creates a child node <p> to <div>

after() 方法可以在调用它所在节点的父节点上，将一个新节点作为同级或子级添加。

- anu

Answer 9

试图回答您的主要问题：

为什么你会使用 .append() 而不是 .after() 或相反呢？

当你用jquery操纵DOM时，你使用的方法取决于你想要的结果，经常使用的一种方法是替换内容。

在替换内容时，您需要.remove()该内容并用新内容替换它。如果您.remove()现有标记，然后尝试使用.append()，它将无法工作，因为标记本身已被删除，而如果您使用.after()，则新内容被添加到（现已删除）标记之外，并且不受先前的.remove()影响。

- Michael Durrant