jQuery:after()和insertAfter()之间有什么区别

Question

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

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

Answer 1

它们是相互对立的.

' after '在选择器后插入参数.

' 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 文档中所解释的那样:

这个:

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

在匹配标记后插入一些新内容后:

$("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&insertBefore):

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

Answer 5

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

==

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