55

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

他们之间有什么区别？我想我可以使用.after()在选定元素（或多个元素）之后插入元素。那正确吗？有什么.insertAfter()用？

4

11 回答 11

80

它们是相互对立的。

' after ' 在选择器之后插入参数。

' 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>
于 2009-12-15T15:39:44.467 回答
24

它们是彼此的倒数。如 jQuery文档中所述：

这个：

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

与此相同：

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

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

于 2009-12-15T15:41:55.167 回答
14

到目前为止，所有的答案都一清二楚；-)（所以我也会尝试一下！）

如果你从这个 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>
于 2009-12-15T15:50:37.987 回答
12

（ 在那之后 ）：

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

而（插入后和插入前）：

$('new_content').insertAfter('selector');
$('new_content').insertBefore('selector');
于 2013-07-14T21:01:09.860 回答
5 
$("p").insertAfter("#foo");

==

$("#foo").after("p")
于 2009-12-15T15:40:37.617 回答
2

检查文档：

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

是相同的：

$("p").insertAfter("#foo");
于 2009-12-15T15:41:45.180 回答
1

after( 内容 ) 返回：jQuery

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

insertAfter(selector) 返回：jQuery

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

于 2009-12-15T15:40:51.970 回答
1

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

于 2016-02-01T10:07:52.963 回答
0

After()和Insertafter()都附加一个元素，主要的变化将来自链接

在after()您在选择器之后附加新元素，然后如果您对元素使用链，那么您使用的任何函数都将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和contents在这两个函数中都发生了变化。这同样适用于以下列表：

  1. before() 与 insertBefore()
  2. 追加（）与追加（）
  3. prepend() 与 prependTo()
  4. 很明显，after() vs insertAfter()。

现场演示

如果您想同时查看两者，那么性能方面after()比insertAfter()See after-vs-insertafter-performance更快。

于 2014-04-07T05:30:06.740 回答
0

在这里你可以找到一个非常好的教程，介绍如何使用 jQuery 方法 prepend()、prependTo()、append()、appendTo()、before()、insertBefore()、after()、insertAfter 向页面添加内容()、wrap()、wrapAll() 和 wrapInner()

于 2012-11-16T14:46:22.023 回答
0

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

于 2011-04-03T16:55:08.237 回答