Javascript .append(), prepend(), .after() 和 .before()

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

提问by Epik

I am pretty proficient with coding, but now and then I come across code that seems to do basically the same thing. My main question here is, why would you use .append()rather then .after()or vice verses?

我非常精通编码，但有时我会遇到似乎做基本相同事情的代码。我的主要问题是，你为什么要使用.append()宁可.after()或反之亦然的诗句？

I have been looking and cannot seem to find a clear definition of the differences between the two and when to use them and when not to.

我一直在寻找并且似乎无法找到两者之间差异的明确定义以及何时使用它们以及何时不使用它们。

What are the benefits of one over the other and also why would i use one rather then the other?? Can someone please explain this to me?

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

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

回答by Jai

See:

看：

---

---

.append()puts data inside an element at last indexand
.prepend()puts the prepending elem at first index

.append()在放数据的元素内部last index和
.prepend()放预先挂起ELEM在first index

---

---

suppose:

认为：

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

when .append()executes it will look like this:

当.append()执行它看起来就像这样：

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

after execution:

执行后：

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

在执行中摆弄 .append() 。

---

---

when .prepend()executes it will look like this:

当.prepend()执行它看起来就像这样：

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

after execution:

执行后：

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

在执行中摆弄 .prepend() 。

---

---

.after()puts the element after the element
.before()puts the element before the element

.after()将元素放在元素之后 将元素
.before()放在元素之前

---

---

using after:

使用后：

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

after execution:

执行后：

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

---

---

Fiddle with .after() in execution.

在执行中摆弄 .after() 。

---

---

using before:

之前使用：

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

after execution:

执行后：

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

---

---

Fiddle with .before() in execution.

在执行中摆弄 .before() 。

---

---

回答by VSri58

This image displayed below gives a clear understanding and shows the exact difference between .append(), .prepend(), .after()and .before()

此图片显示在下面给出了一个清晰的认识，并显示之间准确的区别.append()，.prepend()，.after()和.before()

You can see from the image that .append()and .prepend()adds the new elements as childelements (brown colored)to the target.

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

And .after()and .before()adds the new elements as siblingelements (black colored)to the target.

而.after()和.before()添加新的元素作为同级元素（黑色彩色）的目标。

Here is a DEMOfor better understanding.

这是一个DEMO，以便更好地理解。

---

---

EDIT: the flipped versions of those functions:

编辑：这些函数的翻转版本：

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

on this target:

在这个目标上：

<div class="target">
    This is the target div to which new elements are associated using jQuery
</div>

---

---

So although these functions flip the parameter order, each creates the same element nesting:

因此，尽管这些函数翻转了参数顺序，但每个函数都会创建相同的元素嵌套：

var $div = $('<div>').append($('<img>'));
var $img = $('<img>').appendTo($('<div>'))

...but they return a different element. This matters for method chaining.

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

回答by alijsh

append()& prepend()are for inserting content inside an element (making the content its child) while after()& before()insert content outside an element (making the content its sibling).

append()&prepend()用于在元素内部插入内容（使内容成为其子元素）而after()&before()在元素外部插入内容（使内容成为其兄弟）。

回答by Ionic? Biz?u

The best way is going to documentation.

最好的方法是去文档。

.append()vs .after()

.append()对比 .after()

• .append(): Insert content, specified by the parameter, to the endof each element in the set of matched elements.
• .after(): Insert content, specified by the parameter, aftereach element in the set of matched elements.

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

.prepend()vs .before()

.prepend()对比 .before()

• prepend(): Insert content, specified by the parameter, to the beginningof each element in the set of matched elements.
• .before(): Insert content, specified by the parameter, beforeeach element in the set of matched elements.

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

So, append and prepend refers to child of the object whereas after and before refers to sibling of the the object.

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

回答by I_Debug_Everything

There is a basic difference between .append()and .after()and .prepend()and .before().

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

.append()adds the parameter element inside the selector element's tag at the very endwhereas the .after()adds the parameter element after the element's tag.

.append()添加参数元素选择元素的标签内的最末端，而.after()添加参数元素的元素的标签之后。

The vice-versa is for .prepend()and .before().

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

Fiddle

小提琴

回答by Code.Town

There is no extra advantage for each of them. It totally depends on your scenario. Code below shows their difference.

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

    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

回答by Nate

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

回答by anu

Imagine the DOM(HTML page) as a tree right. The HTML elements are the nodes of this tree.

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

The append()adds a new node to the childof the node you called it on.

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

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

creates a child node <p> to <div>

The after()adds a new node as a sibling or at the same level or child to the parent of the node you called it on.

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

回答by Michael Durrant

To try and answer your mainquestion:

尝试回答您的主要问题：

whywould you use .append() rather then .after() or vice verses?

为什么要使用 .append() 而不是 .after() 或反之亦然？

When you are manipulating the DOM with jquery the methods you use depend on the result you want and a frequent use is to replace content.

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

In replacing content you want to .remove()the content and replace it with new content. If you .remove()the existing tag and then try to use .append()it won't work because the tag itself has been removed, whereas if you use .after(), the new content is added 'outside' the (now removed) tag and isn't affected by the previous .remove().

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