javascript jQuery 的 after 方法不适用于新创建的元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10489328/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery's after method not working with newly created elements
提问by Paul Bruno
Insofar as I can tell, the following code should work, creating a <div>element, and then creating a <p>element; the expression should result in a jQuery object with two elements:
据我所知，以下代码应该可以工作，创建一个<div>元素，然后创建一个<p>元素；该表达式应生成一个包含两个元素的 jQuery 对象：
$("<div>first element's content</div>").after("<p>second element's content</p>");
However, what I get is very different. The documentation(see the heading "Inserting Disconnected DOM Nodes") tells me the above code should result in a jQuery object, grabbing both HTML snippets and building the two DOM elements. But, what I've gotten, in several different versions of jQuery, all above 1.4, is a jQuery object with only 1 node. However, the following code works just fine, returning (what I believe is) the correct jQuery object, two elements inside:
然而，我得到的是非常不同的。文档（参见标题“插入断开的 DOM 节点”）告诉我上面的代码应该产生一个 jQuery 对象，抓取两个 HTML 片段并构建两个 DOM 元素。但是，我在几个不同版本的 jQuery 中得到的，都在 1.4 以上，是一个只有 1 个节点的 jQuery 对象。但是，下面的代码工作得很好，返回（我认为是）正确的 jQuery 对象，里面有两个元素：
$("<div></div>").after("<p>second element's content</p>");
And this example works as well:
这个例子也有效：
$("<div></div>").after("<p>second element's content</p>").after("<p>third element's content</p>");
It seems the .after()method works fine if the first DOM node being created is empty, but does not when it is not (irrespective of the contents of subsequent DOM nodes being appended to it).
.after()如果创建的第一个 DOM 节点为空，则该方法似乎工作正常，但如果不是（不管后续 DOM 节点的内容附加到它上面），则该方法工作正常。
Am I missing something about jQuery's internals, quirky DOM issues and/or JavaScript peculiarities, or is this simply a jQuery bug that's persisted from version 1.4 on through 1.7?
我是否遗漏了一些关于 jQuery 的内部结构、古怪的 DOM 问题和/或 JavaScript 特性，或者这只是一个从 1.4 版到 1.7 版一直存在的 jQuery 错误？
(Here's a meager JSFiddledemonstrating the issue pretty plainly.)
（这是一个微薄的 JSFiddle，非常清楚地展示了这个问题。）
采纳答案by Heretic Monkey
This was a known bug in jQuery < 1.9. See http://bugs.jquery.com/ticket/8759
这是 jQuery < 1.9 中的一个已知错误。见http://bugs.jquery.com/ticket/8759
In jQuery >= 1.9, the following information from the upgrade guideshould be noted:
在 jQuery >= 1.9 中，应注意升级指南中的以下信息：
Prior to 1.9,
.after(),.before(), and.replaceWith()would attempt to add or change nodes in the current jQuery set if the first node in the set was not connected to a document, and in those cases return a new jQuery set rather than the original set. This created several inconsistencies and outright bugs--the method might or might not return a new result depending on its arguments! As of 1.9, these methods always return the original unmodified set and attempting to use.after(),.before(), or.replaceWith()on a node without a parent has no effect--that is, neither the set or the nodes it contains are changed.
在此之前1.9， ，
.after()，.before()并且.replaceWith()将试图如果集合中的第一个节点没有连接到一个文件，并在这些情况下，在当前的jQuery设置为添加或更改节点返回一个新的jQuery集而不是原来的设置。这造成了一些不一致和彻头彻尾的错误——该方法可能会或可能不会根据其参数返回新结果！从 1.9 开始，这些方法总是返回原始未修改的集合，并且尝试在没有父节点的节点上使用.after()、.before()或.replaceWith()没有效果——也就是说，集合或它包含的节点都不会改变。
回答by elclanrs
Use add()to add objects to the collection. I use after()more in DOM elements that already exist or that are cached in a variable, but most of the time, if you work with dynamic markup is more practical to use the equivalent insertAfter().
使用add()对象添加到集合。我after()在已经存在或缓存在变量中的 DOM 元素中使用更多，但大多数时候，如果您使用动态标记，则使用等效的insertAfter().
$("<div>first element's content</div>").add("<p>second element's content</p>");
EDIT:
编辑：
This works...
这工作...
var $el = $('<div/>', {
text: 'hey there'
}).after('<p>Lorem</p>');
回答by WebChemist
I found I was still sometimes having issues with .add()in place of .after(), so another easy way to get around this bug is to make a throw away wrapper element, .append()the sibling elements, and use .html()to just get the inner contents of the wrapper.
我发现有时我仍然在使用.add()in place of 时遇到问题.after()，因此解决此错误的另一种简单方法是丢弃包装器元素，.append()兄弟元素，并使用它.html()来获取包装器的内部内容。
Example:
示例：
$('body').append(
$('<span/>').append(
$("<div>first element's content</div>")
).append(
$("<p>second element's content</p>")
).html()
);
This will add the <div>and <p>but discard the outer <span>. I have found this usually works fine with .append()but can have problems with .appendTo()
这将添加<div>and<p>但丢弃外部<span>。我发现这通常可以正常工作，.append()但可能会出现问题.appendTo()
回答by LePatay
In jQuery 1.12.4, I found out that using a class selectorinstead of an ID selector solves this issue.
在 jQuery 1.12.4 中，我发现使用类选择器而不是 ID 选择器可以解决这个问题。
If you are struggling with
????$("#myelement1").after("<p>test</p>"),
如果你在挣扎
？？？？$("#myelement1").after("<p>test</p>"),
add a unique class to your element and try this:
????$(".myelement1").after("<p>test</p>")
为您的元素添加一个独特的类并尝试以下操作：
????$(".myelement1").after("<p>test</p>")
