.append（），prepend（），.after（）和.before（）
我对编码非常精通，但偶尔我偶尔会遇到代码，这些代码看起来基本上是一样的。 我的主要问题是，为什么要使用.append()而不是.after()或者反之呢？
我一直在寻找，似乎无法find两者之间的差异的明确定义，何时使用它们，什么时候不使用。
相对于另一个的好处是什么，以及为什么我会使用一个而不是另一个？ 有人可以向我解释这个吗？
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() .before()和.before()
您可以从图像中看到.append()和.prepend()将新元素作为子元素（棕色）添加到目标。
。 .after()和.before()将新元素作为同辈元素（黑色）添加到目标。
这是一个更好的理解DEMO 。
append()和prepend()用于在元素内部插入内容（使内容成为它的子元素），而after()和before()将内容插入到元素外部（使内容成为它的同胞）。
最好的方法是去文档。
.append() vs .after()
- 。
append()：将由参数指定的内容插入匹配元素集中每个元素的末尾 。 - 。
after()：将由参数指定的内容插入匹配元素集中的每个元素之后 。
.before() vs .before()
-
prepend()：将由参数指定的内容插入匹配元素集合中每个元素的开始处。 - 。
before()：在匹配元素集中的每个元素之前插入由参数指定的内容。
所以，append和prepend是指对象的子对象，而before和before是指对象的同级。
.append() .prepend()和.before()和.before()和.before()之间有一个基本的区别。
.append() 在select器元素的标记内最后添加参数元素，而.after()将参数元素添加到元素的标记之后 。
反之亦然.before()和.before() 。
小提琴
<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>
他们每个人没有额外的好处。 这完全取决于你的情况。 下面的代码显示了它们的差
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
把DOM （HTML页面）想象成一棵树吧。 HTML元素是这个树的节点。
append()将新节点添加到您调用的节点的child节点上。
Example:$("#mydiv").append("<p>Hello there</p>") creates a child node <p> to <div>
after()将一个新节点作为兄弟节点或者在同一个级别或子节点上添加到您调用的节点的父节点上。
试着回答你的主要问题：
为什么要使用.append（）而不是.after（）或者反之呢？
当你用jQuery来操作DOM时，你使用的方法取决于你想要的结果，而经常使用的是取代内容。
在replace你想要的内容.remove()的内容，并用新的内容取代它。 如果.remove()现有的标签，然后尝试使用.append()它不会工作，因为标签本身已被删除，而如果您使用.after() ，新的内容添加现在被移除）标记，并且不受之前的.remove() 。
