.append()、prepend()、.after() 和 .before()

Posted 2023-03-11

【中文标题】.append()、prepend()、.after() 和 .before()

【英文标题】：.append(), prepend(), .after() and .before()

【发布时间】：2013-01-28 13:59:48

【问题描述】：

我非常精通编码，但时不时会遇到似乎做基本相同事情的代码。我的主要问题是，你为什么要使用.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（用于？）错误，即我使用appendTo，这在语义上似乎也更正确，特别是因为有after（链链链）-nb：after is after not inside

听起来你真正想知道的是为什么选择 append vs after 来达到相同的结果。假设您有

【参考方案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() 将元素放在元素之前

---

使用后：

$('.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.

---

【讨论】：

@joraid 根据您的评论更新了答案，其中一些 js fiddle 链接正在执行中。

很好的解释，但是如果我想在外部 html 视图中加载呢？像这样使用 MVC：$("#viewPlaceHolder").append("/clients/RelationDropdown", selected: selected );

@Djeroen .append() 不会以这种方式加载它。你必须使用.load(url, params)。

不错！还能问一下'$(element).append(content)' 和'$(content).appendTo(target)' 之类的区别吗？ （我不想在这开始一个新的线程！）

【参考方案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 很重要。

【讨论】：

非常容易理解的图片。 :)

点赞！如果我问，那么图片中的 appendTo 和 prependTo 呢？请更新。

我一直在参考您的信息图。希望您喜欢添加的翻转功能。

【参考方案3】：

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

【参考方案4】：

最好的方法是编写文档。

.append() 与 .after()

.append()：将由参数指定的内容插入到匹配元素集合中每个元素的

末尾

。 .after()：插入内容，由参数指定，

在

匹配元素集中的每个元素之后。

.prepend() 与 .before()

prepend()：将参数指定的内容插入到匹配元素集合中每个元素的

开头

。 .before()：插入内容，由参数指定，

before

匹配元素集中的每个元素。

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

【参考方案5】：

.append() 和 .after() 和 .prepend() 和 .before() 之间存在基本区别。

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

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

Fiddle

【参考方案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

【参考方案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>    

【参考方案8】：

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

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

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

creates a child node <p> to <div>

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

【参考方案9】：

尝试回答您的主要问题：

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

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

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