.append（），前置（），。经过（）和。之前（）(.append(), prepend(), .

我与编码非常精通，但现在，然后我遇到似乎基本上做同样的事情的代码。 我的主要问题在这里，你为什么会使用.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()放预谋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

---

拨弄。经过（）的执行。

---

使用前：

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

执行后：

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

---

拨弄。之前（）的执行。

---

Answer 2:

下面显示该图像给出一个清晰的认识，并显示之间的精确差值.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>'))

......但他们返回不同的元素。 这一点很重要的方法链接 。

Answer 3:

append() prepend()被用于一个元素内将内容插入（使内容及其子），而after() before()插入一个元素之外的内容（使内容其兄弟）。

Answer 4:

最好的办法是将文档。

.append() VS .after()

• 。 append()插入内容，由参数指定的，所述集合中匹配的元素中的每个元素的结束 。
• 。 after()插入内容，由参数指定的，在匹配的元素集合中的每个元素之后 。

.prepend() VS .before()

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

因此，追加和预先准备是指对象，而以后的孩子，前指对象的兄弟姐妹。

Answer 5:

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

.append()增加了选择器元件的标记内的参数元素在最后而.after() 元素的标记后添加参数元素。

所述反之亦然为.prepend()和.before()

小提琴

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（）而不是。经过（）或副诗句？

当你操作使用jQuery的DOM使用方法取决于你想要的结果和频繁使用是替换的内容。

在更换内容要.remove()的内容和新的内容替换它。 如果.remove()现有的标签，然后尝试使用.append()因为标签本身已被删除将无法正常工作，而如果你使用.after()新的内容被添加“外部”的（现在删除）标记，不会受到以前的.remove()

文章来源: .append(), prepend(), .after() and .before()