请查看: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()
之前,我需要先将第一个跨度附加到DOM。但是替代方案是什么?如果我无法访问DOM,例如因为我是一个不知道DOM的代码部分? http://jsfiddle.net/s6VdW/10/
更新2
我可以创建一个“临时”div,我将元素附加到其中。然后我归还那个div的孩子们。演示:http://jsfiddle.net/s6VdW/13/ - 这看起来像是要走的路吗?
答案 0 :(得分: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);
添加元素的顺序应该是从左到右
<强> DEMO 强>
答案 1 :(得分:1)
试试这个:
var span1 = $("<span/>").text("Hello");
var br = $("<br/>");
var span2 = $("<span/>").text("World!");
$("div").append(span1);
span1.after(br);
br.after(span2);
首先追加.after()
时 span1
。
答案 2 :(得分:1)
问题是在创建span元素之前使用.after()
的同时动态创建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 的顺序使用.after()
,这样才会结果 1到9 。
希望你能得到答案。 :)
答案 3 :(得分:0)
尝试
var span1 = $("<span/>").text("Hello");
var br = $("<br/>");
var span2 = $("<span/>").text("World!");
span1.after(br);
$("#test").append(span1).append(span2);
答案 4 :(得分:0)
如果您想使用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);