$ fn.insertAfter（）和$ fn.after（）jQuery

Question

我知道$fn.insertAfter()用于在作为参数提供的元素之后插入元素。 $fn.after()与它有何不同？

Answer 1

$.fn.after() ^帮助在您要在其上调用的目标元素之后插入一个元素。

$('div').after('<div>new div</div>');

而$.fn.insertAfter 在指定的节点之后插入目标元素：

$('<div>new div</div>').insertAfter($('#someid'));

首选后者，因为您保留对新创建元素的引用 ，并可以在其上链接更多方法。 因此，例如：

$('<div>new div</div>')
   .insertAfter($('#someid'))
   .attr('foo', 'bar')
   .css({
      'background-color': 'red'
   });

是可能的。 您不能使用.after() ^help来做到这一点。 同样的事情是.append() ^帮助 / .appendTo() ^的帮助和.insertBefore() ^的帮助 / .before() ^帮助

Answer 2

这是同一件事的一个示例，不同之处在于选择器的上下文。 insertAfter插入参数后所选择的元素after插入所选择的元件之后的参数。

$('<div id="foo"></div>').insertAfter('#bar');
$('#bar').after('<div id="foo"></div>');

Answer 3

直接引用文档：

.insertAfter() .after()和.insertAfter()方法执行相同的任务。 主要区别在于语法 ，特别是内容和目标的位置。 使用.after() ，方法之前的选择器表达式是在其后插入内容的容器。 另一方面，使用.insertAfter() ，内容在方法之前，可以作为选择器表达式，也可以作为即时创建的标记，并将其插入到目标容器之后。

Answer 4

这提到，他们执行相同的任务，但有不同的语法。