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

我非常精通编码，但是有时我会遇到似乎基本上做相同事情的代码。我在这里的主要问题是，为什么要使用.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);
});

看到：

.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

在执行中用.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>'))

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

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

最好的方法是去文档。

.append() 与 .after()

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

.prepend() 与 .before()

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

因此，追加和前置是指对象的子代，而前后则是指对象的同级。

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

.append()在最后将参数元素添加到选择器元素的标签内，而.after()将参数元素添加的元素的标签之后。

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

小提琴

他们每个人都没有额外的优势。这完全取决于您的情况。下面的代码显示了它们的区别。

    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

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

将DOM（HTML页面）想象成一棵树。HTML元素是该树的节点。

在append()增加了一个新的节点添加到child你叫它的节点。

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

creates a child node <p> to <div>

在after()增加了一个新的节点作为同级或同级或孩子，你把它称为对节点的父节点。

尝试回答您的主要问题：

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

当使用jquery操纵DOM时，使用的方法取决于所需的结果，并且经常使用的方法是替换内容。

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