为什么jQuery .after（）不链接新元素？

Question

我很好奇为什么jQuery的.after（）不会链接或“提供你”，你用它创建的新元素。在我看来它应该是，但我不是专家，并希望有人可以阐明为什么这是一个坏主意。这是一个例子，可以看到我想要的内容.after（）：

这是一些标记：

<div id="content1">
    <p id="hello1">Hello</p>
</div>
<div id="content2">
    <p id="hello2">Hello</p>
</div>

这就是我想要的，但这会将“Hello”替换为“World！”：

$('#hello1').after('<p />').text('World!');

这可以胜任，但肯定是丑陋的：

$('#hello2').after('<p />');
var $newParagraph = $('#content2 p').last();
$newParagraph.text('World');

这更好，但我没有完全卖掉:(也许我应该？）

$('#hello1').after( $('<p />').text('World') );

注意这显然是一个简化的例子，即“＆lt; p＆gt; World！＆lt; / p＆gt;”不是我想要添加的，我的现实世界问题比这更复杂。

感谢您的任何想法。

Answer 1

据推测，.after()可以正常工作，允许您链接更多适用于原始选定元素的方法：

$('#hello1').after( $('<p />').text('World') )
            .before( $('<p />').text('Before text') )
            .remove();

这使得行为与其他方法保持一致，因此您不必尝试记住哪些返回原始对象以及哪些返回其他对象。

请注意，在您的情况下，$('#hello1')只选择一个元素，因为您选择了id，但是您可以将.after()应用于包含许多元素的jQuery对象，以便在多个元素之后添加（克隆）内容：

$('div.someclass').after( $('<p/>').text('whatever') );

在我看来，将链接上下文保持为原始jQuery对象肯定是有意义的。

.insertAfter() method可能更接近您想要的内容：

$('<p/>').insertAfter('#hello1').text('World');

（它还返回它应用的jQuery对象，但它以“反向”方式插入。）

您可以编写自己的插件方法来返回正在添加的元素，但这会让人感到困惑，因为它会与所有标准方法相反。

Answer 2

这就是大多数jQuery方法的方式。 jQuery最好保持一致并返回原始对象。

解决方法是：

$('#hello1').after(
    $('<p/>', { text: 'World!' })
);

或：

$('#hello1').after(
    $('<p/>').text('World!')
);

甚至：

$('<p/>').text('World!').insertAfter('#hello1');

后者实际上可能是首选，因为它会继续从新的<p>元素链接。

Answer 3

它没有为您提供已创建的元素，因为您并不总是创建元素，它需要大量的处理能力才能让JQuery检测到元素是否已创建，并且它总是更有意义它返回了元素女巫是操作的目标。