Question

就我所知，以下代码应该有效，创建<div>元素，然后创建<p>元素;表达式应该产生一个带有两个元素的jQuery对象：

$("<div>first element's content</div>").after("<p>second element's content</p>");

然而，我得到的是非常不同的。 The documentation（请参阅“插入断开的DOM节点”标题）告诉我上面的代码应该生成一个jQuery对象，抓取两个HTML片段并构建两个DOM元素。但是，我所获得的，在几个不同版本的jQuery中，都高于1.4，是一个只有1个节点的jQuery对象。但是，下面的代码工作正常，返回（我相信）正确的jQuery对象，里面有两个元素：

$("<div></div>").after("<p>second element's content</p>");

这个例子也适用：

$("<div></div>").after("<p>second element's content</p>").after("<p>third element's content</p>");

如果正在创建的第一个DOM节点为空，则.after()方法似乎正常工作，但是当它不存在时（无论后续DOM节点的内容是否附加到它），它都可以正常工作。

我是否遗漏了关于jQuery的内部，奇怪的DOM问题和/或JavaScript特性的问题，或者这只是一个jQuery错误，从版本1.4到1.7继续存在？

（Here's a meager JSFiddle非常清楚地证明了这个问题。）

Answer 1

这是jQuery中的已知错误＆lt; 1.9。见http://bugs.jquery.com/ticket/8759

在jQuery＆gt; = 1.9中，应注意following information from the upgrade guide：

在1.9之前，如果集合中的第一个节点未连接到文档，.after()，.before()和.replaceWith()将尝试在当前jQuery集中添加或更改节点，在这些情况下返回一个新的jQuery集而不是原始集。这会产生一些不一致和彻头彻尾的错误 - 该方法可能会也可能不会根据其参数返回新结果！从1.9开始，这些方法总是返回原始的未修改集，并尝试在没有父节点的节点上使用.after()，.before()或.replaceWith() - 也就是说， set或其包含的节点已更改。

Answer 2

使用add()将对象添加到集合中。我在已经存在或缓存在变量中的DOM元素中多使用after()，但大多数情况下，如果使用动态标记，则使用等效的insertAfter()更实用。

$("<div>first element's content</div>").add("<p>second element's content</p>");

修改

这有效......

var $el = $('<div/>', { text: 'hey there' }).after('<p>Lorem</p>');

Answer 3

我发现我仍然有时会遇到.add()代替.after()的问题，所以另一个解决此错误的简单方法就是抛弃一个包装元素，.append()兄弟元素，并使用.html()来获取包装器的内部内容。

示例：

$('body').append( $('<span/>').append( $("<div>first element's content</div>") ).append( $("<p>second element's content</p>") ).html() );

这将添加<div>和<p>，但会丢弃外部<span>。我发现这通常适用于.append()，但可能会遇到.appendTo()
的问题

Answer 4

在jQuery 1.12.4中，我发现使用类选择器而不是ID选择器可以解决这个问题。

如果你正在努力与 $("#myelement1").after("<p>test</p>")，

为你的元素添加一个唯一的类并试试这个：
$(".myelement1").after("<p>test</p>")

方法不使用新创建的元素后的jQuery

4 个答案: