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

Question

我非常精通编码,但偶尔我会遇到似乎基本相同的代码.我在这里的主要问题是,你为什么要使用.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

在执行中摆弄.after().

之前使用:

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

执行后:

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

在执行中摆弄.before().

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():在匹配元素集中的每个元素之前插入由参数指定的内容.

因此,append和prepend指的是对象的子对象,而after和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>