jQuery 的 after 方法不适用于新创建的元素答案

【问题标题】：jQuery's after method not working with newly created elementsjQuery 的 after 方法不适用于新创建的元素
【发布时间】：2018-05-18 20:54:01
【问题描述】：

据我所知，以下代码应该可以工作，创建一个<div> 元素，然后创建一个<p> 元素；该表达式应生成一个包含两个元素的 jQuery 对象：

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

但是，我得到的却非常不同。 The documentation（参见标题“插入断开连接的 DOM 节点”）告诉我上面的代码应该生成一个 jQuery 对象，同时获取 HTML sn-ps 并构建两个 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 特性，或者这只是一个从 1.4 版一直持续到 1.7 版的 jQuery 错误？

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

【问题讨论】：

正如下面对 elclanrs 回答的 cmets 中所述，add 是一个可行的替代品，我已经创建了一个 new JSFiddle 来证明它有效。但是，这并不能解释为什么 the docs 上显示的行为（甚至它的 cmets，请参阅包含“MarkAndrewSlade”答案的整个线程）对于新创建的 jQuery 对象的 after 方法不可用该元素有内容时的元素。

标签： javascript jquery jquery-after

【解决方案1】：

这是 jQuery http://bugs.jquery.com/ticket/8759

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

在 1.9 之前，如果集合中的第一个节点未连接到文档，.after()、.before() 和 .replaceWith() 将尝试在当前 jQuery 集合中添加或更改节点，并且在这些情况下返回一个新的 jQuery 集合而不是原始集合。这造成了一些不一致和彻底的错误——该方法可能会也可能不会返回新结果，具体取决于它的参数！从 1.9 开始，这些方法总是返回原始的未修改集，并尝试在没有父节点的节点上使用 .after()、.before() 或 .replaceWith() 无效——也就是说，集或它包含的节点都没有变了。

【讨论】：

奇怪的是，在将 jQuery 从 1.8.2 更新到 1.11.0 后，我遇到了同样的错误。 $.after() 和 $.before() 方法不适用于新创建的元素。我需要首先将新创建的元素添加到 DOM，然后将新内容插入其中。另一种解决方法是使用 $.add() 方法，但如果您希望在元素之前插入内容，它将不起作用。
我在更新到 jQuery 1.10 后也出现了这种情况
我使用的是 2.2.3 版，但仍然无法使用。把我的头撞到墙上后终于检查了。

【解决方案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>');

【讨论】：

谢谢您，elclanrs，您的回复。以后我会使用add。我刚刚创建了一个new JSFiddle 来证明add 确实做了你提到的事情。但这并没有回答我的问题，这就是为什么 after 没有。
再次感谢。因为它没有回答我的问题，所以我没有给你答案，但我已经对你的答案投了赞成票，以给予尊重，因为它在我的问题中找到了一个新的粒度。

【解决方案3】：

我发现有时使用.add() 代替.after() 仍然存在问题，因此解决此错误的另一种简单方法是制作一个丢弃包装元素.append() 兄弟元素，并使用@ 987654324@ 获取包装器的内部内容。

示例：

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

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

【讨论】：

【解决方案4】：

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

如果你正在挣扎
$("#myelement1").after("<p>test</p>"),

为您的元素添加一个独特的类并尝试以下操作：
$(".myelement1").after("<p>test</p>")

【讨论】：