225

我非常精通编码，但时不时地遇到一些似乎做基本相同事情的代码。我的主要问题是，你为什么要使用.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);
});
4

9 回答 9

483

看：

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

在执行中摆弄 .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() 。

于 2013-02-13T04:58:43.883 回答
142

下面显示的这张图片提供了清晰的理解，并显示了 、.append()和之间的确切区别.prepend().after().before()

jQuery 信息图

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

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

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

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

jQuery 插入信息图，以及函数的翻转版本

使用此代码：

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

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

于 2014-12-21T12:57:59.970 回答
38

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

于 2013-02-13T04:54:44.363 回答
20

最好的方法是文档。

.append()对比.after()

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

.prepend()对比.before()

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

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

于 2013-02-13T04:59:19.917 回答
12

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

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

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

小提琴

于 2013-02-13T05:02:56.460 回答
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
于 2013-02-13T05:20:21.397 回答
5 
<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>
于 2014-10-02T16:08:12.287 回答
3

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

向您调用它的节点append()添加一个新节点child。

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

creates a child node <p> to <div>

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

于 2013-11-17T16:42:59.893 回答
3

尝试回答您的主要问题：

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

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

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

于 2014-07-26T12:21:28.337 回答