jQuery.after()无法按预期工作

Question

请看看:http://jsfiddle.net/s6VdW/

HTML:

<div id="test"></div>

JS:

var span1 = $("<span/>").text("Hello");
var br = $("<br/>");
var span2 = $("<span/>").text("World!");
span1.after(br).after(span2);

$("#test").append(span1);

预期结果是:

Hello
World

HTML的预期结果是:

<div>
    <span>Hello</span>
    <br/>
    <span>World</span>
</div>

错误是什么？根据jQuery Docs(http://api.jquery.com/after/),它应该是可能的:

.after() 也适用于断开连接的DOM节点.

和

即使在将其插入文档之前,也可以进一步操作该集合.

UPDATE

看来,在使用之前,我需要首先将第一个跨度附加到DOM .after().但是替代方案是什么？如果我无法访问DOM,例如因为我在DOM中没有意识到代码的一部分？http://jsfiddle.net/s6VdW/10/

更新2

我可以创建一个"临时"div,我将元素附加到其中.然后我归还那个div的孩子们.演示:http://jsfiddle.net/s6VdW/13/ - 这看起来像是要走的路吗？

Answer 1

问题是您在创建该 span 元素之前同时动态创建了 span1 .after()。span1.after(br).after(span2);在这一行中，它将搜索要span1应用的元素.after()，但该元素不存在。如果你清楚地理解为什么我们必须使用.ready()它，这里就有相似之处。你的代码应该是这样的

var span1 = $("<span/>").text("Hello");
var br = $("<br/>");
var span2 = $("<span/>").text("World!");

$("#test").append(span1);
span1.after(span2).after(br);

请记住从左到右.after()添加元素，因此您必须按照9 到 1 的顺序使用，这样它将给出结果1 到 9。.after()

希望你得到答案。:)