Question

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

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

Answer 1

他们是相互对立的。

'在之后'在参数后面插入参数。

' insertAfter '在参数后插入选择器。

以下是与此相同的例子：

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>

Answer 2

他们彼此相反。正如jQuery documentation中所解释的那样：

此：

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

与此相同：

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

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

Answer 3

到目前为止，所有的答案都很清楚，因为泥;-)（所以我也会捅它！）

如果你从这个Html开始：

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

After 在匹配的代码后插入一些新内容：

$("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>

Answer 4

（之前和之后）：

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

while（insertAfter＆amp; insertBefore）：

$('new_content').insertAfter('selector');
$('new_content').insertBefore('selector');

Answer 5

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

==

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

Answer 6

检查documentation：

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

与：

相同

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

Answer 7

after（content）返回：jQuery

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

insertAfter（selector）返回：jQuery

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

Answer 8

似乎插入元素的传递属性不适用于“.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”

Answer 9

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

Answer 10

After()和Insertafter()都附加了一个元素，链接会发生重大变化

在after()中，您在选择器后附加新元素，然后如果您使用链接元素，那么您使用的任何函数将在selector上触发，而不是在新添加的元素上触发，并且相反的将在insertAfter()中执行，其中链接将对新添加的元素执行，例如，

After（）和 InsertAfter（）

<强> HTML

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

<强> SCRIPT

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和contents正在改变这两个功能。这同样适用于以下列表：

before（）vs insertBefore（）
append（）vs appendTo（）
prepend（）vs prependTo（）
和after（）vs insertAfter（），显然。

<强> Live Demo

如果你想同时看到两者，那么表现明智，after()比insertAfter()要快after-vs-insertafter-performance。

Answer 11

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

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

11 个答案:

insertafter（）：

后（）：