jQuery:之间有什么区别之后，()和新段落()

Question

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

之间的区别是什么？我认为我可以使用 .after() 插入元素后一个选择元(或元件)。是这样吗？是什么 .insertAfter() 用的？

Answer 1

它们是相互对立的。

'后'插入的参数之后的选择。

'新段落'将选择后的参数。

这里是一个例子同样的事情做：

新段落():

<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

他们是逆的。在解释延 文档:

这样的：

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

是相同的，为此：

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

最后，新段落返回所插入的元素，而.后()将返回的情况下被称为。

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>

另一方面， 新段落 移动一个或多个元素 这已经存在于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');

同时(新段落&活动):

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

Answer 5

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

==

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

Answer 6

检查 文档:

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

是相同的：

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

Answer 7

之后(含)返回：jQuery

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

新段落(选择)返回：jQuery

插入所有的匹配件之后另一个，指定、设置的因素。

Answer 8

它也似乎过特性的插件不起作用"。新段落"，但工作"。之后"

着作：

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

不会的工作：

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

*编辑:似乎它不工作"。之后，"无论是，但是仅仅与"。追加到权限"

Answer 9

在这里， 你可以找到一个非常非常好的教程的如何添加内容的网页使用延的方法prepend()prependTo(),append(),追加到权限(),前(),活动()之后，(),新段落(),包裹(),wrapAll()和wrapInner()

Answer 10

后() 和 新段落() 这两个附加元素，主要的变化会对链接

在 after() 你是追加的新的因素后选择，然后如果您使用的链的元素，那么任何功能的使用将火 selector 不上新添加元，相反将进行的 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. 之前()vs活动()
2. append()与追加到权限()
3. prepend()与prependTo()
4. 和之后()与新段落(),很明显。

现场演示

如果你想要看到，绩效明智的然后 after() 是的速度比 insertAfter() 看看 后对新段落-性能.

Answer 11

一个重要的事情，除了一些法是，存泄漏和绩效。新段落的效率更高比插入当你吨dom要素。所以喜欢的新段落代替之后。