13

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

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

然而，我得到的是非常不同的。文档（参见标题“插入断开连接的 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 特性，或者这只是一个从 1.4 版到 1.7 版持续存在的 jQuery 错误？

（这是一个微薄的 JSFiddle非常清楚地展示了这个问题。）

4

4 回答 4

10

这是 jQuery < 1.9 中的一个已知错误。见http://bugs.jquery.com/ticket/8759

在 jQuery >= 1.9 中，应注意升级指南中的以下信息：

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

于 2012-05-07T22:33:47.740 回答
6

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

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

编辑：

这有效...

var $el = $('<div/>', {
    text: 'hey there'
}).after('<p>Lorem</p>');
于 2012-05-07T21:32:30.733 回答
0

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

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

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

于 2018-05-18T12:54:01.140 回答
0

我发现我有时仍然会遇到.add()in place of 的问题.after()，因此解决此错误的另一种简单方法是制作一个丢弃的包装器元素，.append()即兄弟元素，并使用它.html()来获取包装器的内部内容。

示例：

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

这将添加<div>and<p>但丢弃外部<span>。我发现这通常可以正常工作，.append()但可能会遇到问题.appendTo()

于 2015-11-06T20:39:07.560 回答