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文档（http://api.jquery.com/after/），这应该是可能的：

.after()也适用于未连接的DOM节点。

并且

该集合可以进一步操作，甚至在插入文档之前。

更新

看起来，在使用.after()之前，我需要先将第一个span附加到DOM。但是替代方案是什么？如果我无法访问DOM，例如因为我在代码中不知道DOM的部分中？ http://jsfiddle.net/s6VdW/10/ 我可以创建一个“临时”div，向其中添加元素。然后我返回该div的子元素。演示：http://jsfiddle.net/s6VdW/13/ - 这看起来像是正确的方法吗？

- Sandro

---

请不要仅在fiddle上发布代码，应将代码放在此处并使用fiddle进行参考/演示。我们希望问题具有自包含性。=） - J. Steen

@Sandro，看起来是一个错误，可能是在文档或库中。span1.after(br).after(span2).length返回1，但应该是3。也许你应该在jQuery的错误跟踪器中开一个票。 - Frédéric Hamidi

@Sandro 我认为你正在动态创建HTML，所以你需要先调用append()，然后再调用after()。 - jaychapani

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);

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

演示

- jaychapani

---

如果我无法访问DOM，例如代码是作为动态创建这两个跨度的函数的一部分，并将其与断点分隔并返回给调用者。就像这里：http://jsfiddle.net/s6VdW/10/ - Sandro

在这种情况下，您可以使用append()，例如：return span1.append(br).append(span2); - jaychapani

不，它会生成 <div id="test"><span>Hello<br><span>World!</span></span></div> http://jsfiddle.net/s6VdW/12/ - Sandro

Answer 2

尝试使用这个：

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

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

当你添加第一个span1时，使用.after()。

FIDDLE

- Jai

Answer 3

问题在于您在动态创建的同时，在创建该元素之前使用了.after()。在这一行中，它将搜索元素以应用.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 的顺序使用 .after()，这样才会得到 1 到 9 的结果。

希望你已经得到答案。 :)

- Faizul Hasan

Answer 4

尝试

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

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

- Dipesh Parmar

---

这将显示两个span，但我仍然缺少<br/>元素。HTML输出：<div id="test"><span>Hello</span><span>World!</span></div> - Sandro

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);

- Gilles Hemmerlé