.append（），prepend（）,. after（）和.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);
});

Answer 1

见

---

.append()将数据放在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>

---

Fiddle with .append() in execution.

---

.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

---

Fiddle with .after() in execution.

---

之前使用：

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

执行后：

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

---

Fiddle with .before() in execution.

---

Answer 2

下面显示的此图片清晰明了，并显示了.append()，.prepend()，.after()和.before()

之间的确切差异

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

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

以下是 DEMO ，以便更好地理解。

---

编辑：这些功能的翻转版本：

使用this code：

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

......但他们会返回不同的元素。这对method chaining很重要。

Answer 3

append()＆amp; prepend()用于在元素中插入内容（使内容成为子元素）after()＆amp; before()在元素外插入内容（使内容成为兄弟）。

Answer 4

最好的方法是记录文件。

.append() vs .after()

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

.prepend() vs .before()

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

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

Answer 5

.append()与.after()以及.prepend()和.before()之间存在基本差异。

.append()在最后的选项元素标记内添加参数元素，而.after()在元素标记之后添加参数元素 。

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

Fiddle

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

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>    

Answer 8

将 DOM （HTML页面）想象为树右。 HTML元素是此树的节点。

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

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

creates a child node <p> to <div>

after()将新节点添加为兄弟节点，或者将同一级别或子节点添加到您调用它的节点的父节点上。

Answer 9

尝试回答主问题：

为什么你会使用.append（）而不是.after（）或反之？

当您使用jquery操作DOM时，您使用的方法取决于您想要的结果，并且经常使用的是替换内容。

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