jQuery：after（）和insertAfter（）之间有什么区别

jQuery有一个.after()方法，还有一个.insertAfter()方法。

他们之间有什么区别？ 我想我可以使用.after()在所选元素（或元素）之后插入元素。 是对的吗？ 什么是.insertAfter()为？

他们是相互对立的。

在select器之后插入参数之后。

' insertAfter '在参数后插入select器。

下面是一个同样的事情的例子：

insertafter（）： 

 <div class="container"> <h2>Greetings</h2> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div> $( "<p>Test</p>" ).insertAfter( ".inner" ); Each inner <div> element gets this new content: <div class="container"> <h2>Greetings</h2> <div class="inner">Hello</div> <p>Test</p> <div class="inner">Goodbye</div> <p>Test</p> </div>

后（）： 

 <div class="container"> <h2>Greetings</h2> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div> $( ".inner" ).after( "<p>Test</p>" ); <div class="container"> <h2>Greetings</h2> <div class="inner">Hello</div> <p>Test</p> <div class="inner">Goodbye</div> <p>Test</p> </div>

他们是互逆的。 正如jQuery 文档中所解释的：

这个： 

 $("p").insertAfter("#foo");

是这样的： 

 $("#foo").after("p");

最后，insertAfter返回所有插入的元素，而.after（）将返回它被调用的上下文。

到目前为止所有的答案都像泥巴一样清楚;-)（所以我也会试一试！）

如果你从这个Html开始： 

 <p id="pOne">Para 1</p> <p id="pTwo">Para 2 <span id="sMore">More</span></p>

在匹配的标签之后插入一些新内容之后： 

 $("p") // Match all paragraph tags .after("<b>Hello</b>"); // Insert some new content after the matching tags

最终的结果是： 

 <p id="pOne">Para 1</p><b>Hello</b> <p id="pTwo">Para 2 <span id="sMore">More</span></p><b>Hello</b>

另一方面， InsertAfter移动DOM中已经存在的一个或多个元素（ 真的，这个方法可以被称为MoveAfter ）： 

 $("#sMore") // Find the element with id `sMore` .insertAfter("#pOne"); // Move it to paragraph one

导致： 

 <p id="pOne">Para 1</p><span id="sMore">More</span> <p id="pTwo">Para 2</p>

（ 在那之后 ）： 

 $('selector').after('new_content'); $('selector').before('new_content');

while（insertAfter＆insertBefore）： 

 $('new_content').insertAfter('selector'); $('new_content').insertBefore('selector'); 
 $("p").insertAfter("#foo");

== 

 $("#foo").after("p")

检查文档 ： 

 $("#foo").after("p")

是相同的： 

 $("p").insertAfter("#foo");

after（content）返回：jQuery

在每个匹配的元素之后插入内容。

insertAfter（selector）返回：jQuery

将所有匹配的元素插入另一个指定的元素集合之后。

也似乎插入元素的传递属性不适用于“.insertAfter”，但与“.after”

作品： 

 $('#element').after('<p>Test</p>', { 'class': 'element_class', 'id': 'element_id' });

不起作用： 

 $('<p>Test</p>', { 'class': 'element_class', 'id': 'element_id' }).insertAfter('#element');

*编辑：似乎它不适用“.after”，但只有“.appendTo”

在这里你可以find一个非常好的教程，介绍如何使用jQuery方法prepend（），prependTo（），append（），appendTo（），before（），insertBefore（），after（），insertAfter （），wrap（），wrapAll（）和wrapInner（）

After（）和Insertafter（）都附加了一个元素，主要的变化就是链接

在after()之后，你在select器之后追加了新的元素，然后如果你使用的是链的元素，那么你使用的任何函数都会在selector上触发，而不是在新添加的元素上，而在insertAfter()链接将在新添加的元素上执行，例如，

After（）和InsertAfter（）

HTML 

 <div class="after">After Div</div> ------------------------------------------------------ <div class="insertafter">Insert after div</div>

脚本 

 var p='<p>Lorem ipsum doner inut..</p>'; $('.after').after(p)//chaining, performed on .after div not on p .css('backgroundColor','pink'); //you can chain more functions for .after here $(p).insertAfter('.insertafter')//chaining, performed on p not on .insertafter div .css('backgroundColor','yellow'); // here you can chain more functions for newly added element(p)

见上面的selector和两个function的contents正在改变。 以下列表同样适用：

  1. before（）vs insertBefore（）
  2. append（）vs appendTo（）
  3. prepend（）vs prependTo（）
  4. 和after（）vs insertAfter（），显然。

现场演示

如果你想看到两者，性能明智，那么after()比insertAfter()更快。请参阅after-vs-insertafter-performance 。

除了一些语法之外，一个重要的事情是内存泄漏和性能。 当你有大量的dom元素时，insertafter比insert更有效率。 所以更喜欢insertafter而不是之后。

Interesting Posts