javascript - 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 节点。

和

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

更新

看来，我需要先将第一个跨度附加到 DOM，然后再使用.after(). 但是有什么选择呢？如果我无法访问 DOM，例如因为我处于代码的 DOM 未知部分？http://jsfiddle.net/s6VdW/10/

更新 2

我可以创建一个“临时” div，将元素附加到其中。然后我返回那个 div 的孩子。演示： http: //jsfiddle.net/s6VdW/13/ - 这看起来像要走的路吗？

Answer 1

您正在动态创建 html，因此您需要先调用 append()，然后再调用 after()。

你应该试试

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

JS

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

添加元素的顺序应该是从左到右

演示

Answer 2

试试这个：

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

$("div").append(span1);
span1.after(br);
br.after(span2);

.after()当你先追加时做span1。

小提琴

Answer 3

.after()问题是您在创建该 span 元素之前同时使用动态创建 span1 。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()

希望你得到答案。:)

Answer 4

尝试

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

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

Answer 5

如果要使用 after 方法，可以尝试以下方法：

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

// First step : Add the first element to your div
$("div").append(span1);
// Second step : Add the differents elements with the add method (note that I inversed the order to work fine because the after is applied to span1 and not to the last added element.
span1.after(span2).after(br);