Javascript jQuery:What'；这是after（）和insertAfter（）之间的区别

jQuery有一个

.after（）

方法，还有一个

.insertAfter（）

方法

---

他们之间有什么区别？我想我可以使用

.after（）

在所选元素之后插入元素。是这样吗？

.insertAfter（）

的作用是什么？

它们是相互对立的

“在之后”在选择器后面插入参数

“insertAfter”在参数后插入选择器

下面是一个使用以下工具执行相同操作的示例：

insertafter（）：

问候语
你好
再见
$（“Test
”）。在（“.inner”）之后插入；
每个内部元素都会获得以下新内容：
问候语
你好
试验

再见
试验

在（）之后：

问候语
你好
再见
$（“.inner”）。在（“测试”
”）之后；
问候语
你好
试验

再见
试验

==

after（content）返回：jQuery

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

insertAfter（选择器）返回：jQuery

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

检查：

同：

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

---

它们是相反的。正如jQuery中所解释的：

这：

与此相同：

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

---

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

到目前为止，所有答案都清楚地显示为mud；-）（所以我也要试试看！）

如果从以下Html开始：

<p id="pOne">Para 1</p>
<p id="pTwo">Para 2 <span id="sMore">More</span></p>

导致：

<p id="pOne">Para 1</p><span id="sMore">More</span>
<p id="pTwo">Para 2</p>

第1段
第2段

似乎插入元素的传递属性不适用于“.insertAfter”，而适用于“.after”

作品：

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

$（'element'）。在（'Test
'之后，{'class'：'element\u class'，'id'：'element\u id'}）；

不起作用：

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

$（“Test
”，{'class'：'element\u class'，'id'：'element\u id'）。插入（'#element'）；

*编辑：似乎它不适用于“.after”和“.appendTo”，但仅适用于“.appendTo”

您可以找到一个非常好的教程，介绍如何使用jQuery方法prepend（）、prependTo（）、append（）、appendTo（）、before（）、insertBefore（）、after（）、insertAfter（）、wrap（）、wrapull（）和wrapInner（）

（after&before）：

while（插入后和插入前）：

而且两者都附加了一个元素，链接的主要变化将出现

在

after（）

中，您将在选择器之后追加新元素，然后如果您对元素使用链，则您使用的任何函数都将在

选择器上启动，而不是在新添加的元素上启动，相反的操作将在
insertAfter（）中执行
其中将对新添加的元素执行链接，例如

After（）和InsertAfter（）

HTML

<div class="after">After Div</div>
------------------------------------------------------
<div class="insertafter">Insert after div</div>

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)

var p='Lorem ipsum doner inut.
'；
$（'.after'）.after（p）//链接，在.after div上执行，而不是在p上执行
.css（'backgroundColor'，'pink'）；
//在这里之后，您可以为链接更多函数
$（p）.insertAfter（'.insertAfter'）//链接，在p上执行，而不是在.insertAfter div上执行
.css（'backgroundColor'，'yellow'）；
//在这里，您可以为新添加的元素（p）链接更多函数

如上所述，
选择器
和
内容
在两个功能中都在变化。这同样适用于下列情况：

before（）与insertBefore（）的比较
append（）与appendTo（）的比较
prepend（）与prependTo（）的比较
显然，after（）和insertAfter（）是不同的

如果您想同时看到这两个方面，那么
after（）
比
insertAfter（）快。
一些语法的一个重要区别是内存泄漏和性能。
当有大量dom元素时，insertafter比insert更有效。因此，选择insertafter而不是after。
一个主要区别是“return”值。您调用其函数的实例就是返回的实例。您使用了单词“contract”，因此我可以找到它：-）@user10089632-我看到了您建议的编辑，并批准了它。但它真的应该独立作为自己的答案。它比任何其他答案都要清晰，包括这一个，通过提供它作为答案，你将获得声誉。希望随着时间的推移，你的答案会得到比这个更多的选票。如果只有一个目标元素，这两种方法都会移动元素，如果有多个目标元素，则会创建克隆。不正确，
after（）
将返回调用它的上下文，在上面的示例中是
$（“#foo”）。after（“p”）
将返回
$（“#foo”）
允许进一步链接命令。这并不能回答问题。若要评论或要求作者澄清，请在其帖子下方留下评论-您可以随时对自己的帖子发表评论，一旦您有足够的评论，您就可以发表评论。-@dotnetom这无疑是一个回答问题的尝试。这不应被标记，也不应建议在LQPRQ中删除。请看：这应该是一个评论，因为它没有回答问题。
<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>

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

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

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

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

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

<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)