Javascript jQuery：after() 和 insertAfter() 有什么区别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1908229/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery: What's the difference between after() and insertAfter()
提问by Cheeso
jQuery has an .after()method, and also an .insertAfter()method.
jQuery 有.after()方法，也有.insertAfter()方法。
What's the difference between them? I think I can use .after()to insert elements after a selected element (or elements). Is that right? What's .insertAfter()for?
它们之间有什么区别？我想我可以使用.after()在选定元素（或多个元素）之后插入元素。那正确吗？有什么.insertAfter()用？
回答by graphicdivine
They are mutual opposites.
他们是相互对立的。
'after' inserts the argument after the selector.
' after' 在选择器之后插入参数。
'insertAfter' inserts the selector after the argument.
' insertAfter' 在参数之后插入选择器。
Here is an example of the same thing done with:
以下是使用以下方法完成的相同操作的示例：
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> $( "<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>
after():
后（）：
<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>
<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>
回答by Chris Clark
They are inverses of each other. As explained in the jQuery documentation:
它们互为倒数。如 jQuery文档中所述：
This:
这个：
$("p").insertAfter("#foo");
Is the same as this:
是不是和这个一样：
$("#foo").after("p");
And lastly, insertAfter returns all inserted elements, whereas .after() will return the context it is called on.
最后， insertAfter 返回所有插入的元素，而 .after() 将返回调用它的上下文。
回答by Dexter
All of the answers so far are clear as mud ;-) (So I'll take a stab at it too!)
到目前为止，所有答案都像泥巴一样清晰；-)（所以我也会尝试一下！）
If you start off with this Html:
如果你从这个 Html 开始：
<p id="pOne">Para 1</p>
<p id="pTwo">Para 2 <span id="sMore">More</span></p>
Afterinserts some newcontent after the matching tags:
$("p") // Match all paragraph tags
.after("<b>Hello</b>"); // Insert some new content after the matching tags
The end result is:
最终结果是：
<p id="pOne">Para 1</p><b>Hello</b>
<p id="pTwo">Para 2 <span id="sMore">More</span></p><b>Hello</b>
On the other hand, InsertAftermoves one or more elements which already exist on the DOMafter the selected elements (Really, this method could be called MoveAfter):
另一方面，InsertAfter在选定元素之后移动一个或多个已存在于 DOM 上的元素（实际上，此方法可以称为MoveAfter）：
$("#sMore") // Find the element with id `sMore`
.insertAfter("#pOne"); // Move it to paragraph one
Resulting in:
导致：
<p id="pOne">Para 1</p><span id="sMore">More</span>
<p id="pTwo">Para 2</p>
回答by Hazem_M
( after & before ):
（ 在那之后 ）：
$('selector').after('new_content');
$('selector').before('new_content');
while ( insertAfter & insertBefore ):
while ( insertAfter & insertBefore ):
$('new_content').insertAfter('selector');
$('new_content').insertBefore('selector');
回答by Svetlozar Angelov
$("p").insertAfter("#foo");
==
==
$("#foo").after("p")
回答by kgiannakakis
回答by just somebody
after( content ) Returns: jQuery
after( content ) 返回：jQuery
Insert content after each of the matched elements.
在每个匹配的元素之后插入内容。
insertAfter( selector ) Returns: jQuery
insertAfter( 选择器 ) 返回：jQuery
Insert all of the matched elements after another, specified, set of elements.
在另一个指定的元素集之后插入所有匹配的元素。
回答by bogdan
It also seems that passing attributes of the inserted element doesn't work with ".insertAfter", but works with ".after"
插入元素的传递属性似乎也不适用于“.insertAfter”，但适用于“.after”
works:
作品：
$('#element').after('<p>Test</p>', { 'class': 'element_class', 'id': 'element_id' });
doesn't work:
不起作用：
$('<p>Test</p>', { 'class': 'element_class', 'id': 'element_id' }).insertAfter('#element');
*edit: seems it doesn't work with ".after" neither, but only with ".appendTo"
*编辑：似乎它既不适用于“.after”，也不适用于“.appendTo”
回答by warmth
Hereyou can find a very very good tutorial of how to add content to a page using the jQuery methods prepend(), prependTo(), append(), appendTo(), before(), insertBefore(), after(), insertAfter(), wrap(), wrapAll() and wrapInner()
在这里您可以找到一个非常好的教程，介绍如何使用 jQuery 方法 prepend()、prependTo()、append()、appendTo()、before()、insertBefore()、after()、insertAfter ()、wrap()、wrapAll() 和 wrapInner()
回答by Rohan Kumar
After()and Insertafter()both appends an element, the major change will come for chaining
After()和Insertafter()都附加了一个元素，主要的变化是链接
In after()you are appending the new element after your selector and then if you are using chain for the element then any function you used will fire on the selectornot on the newly added element, and the opposite will performed in insertAfter()in which the chaining will performed on the newly added element for example,
在after()您将新元素附加到选择器之后，然后如果您对元素使用链，那么您使用的任何函数都将selector在新添加的元素上不触发，并且将执行相反的操作insertAfter()，其中链接将在元素上执行例如，新添加的元素，
After()and InsertAfter()
After()和InsertAfter()
HTML
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)
See above the selectorand contentsare changing in both functions. The same will apply on the list of following:
见上面的selector和contents两个功能都在变化。这同样适用于以下列表：
- before() vs insertBefore()
- append() vs appendTo()
- prepend() vs prependTo()
- and after() vs insertAfter(), obviously.
- before() 与 insertBefore()
- append() 与 appendTo()
- prepend() 与 prependTo()
- 和 after() vs insertAfter()，很明显。
If you want to see both, performance wise then after()is faster than insertAfter()See after-vs-insertafter-performance.
如果您想同时查看两者，那么性能方面after()比insertAfter()See after-vs-insertafter-performance更快。
