jQuery : Inserting into newly created elements

Question

我有这段代码(运行 jQuery 1.4.2)

var elementToAdd = $('<h3>').html('header');
var p = $('<p>').html('hello world');
elementToAdd.after(p);
$('div#content').append(elementToAdd);

但是，输出是

<div id="content">
  <h3>header</h3>
</div>

未添加“Hello world”段落。

我做错了什么？

<小时/>

我一直在尝试一些变化:

这也不起作用:

var elementToAdd = $('<div>Header</div>');
var p = $('<p>hello world</p>');
elementToAdd.after(p);

或者这个:

var elementToAdd = $('<h3>header</h3>').after('<p>hello world</p>');

但这有效(至少在 Firefox 上):

var elementToAdd = $('<div>').after('<h3>header</h3>').after('<p>hello world</p>');

为什么？

Answer 1

我认为 .after 不适用于尚未添加到 DOM 的元素...

试试这个

var elementToAdd = $('<h3>').html('header');
var p = $('<p>').html('hello world');
$('div#content').append(elementToAdd);
elementToAdd.after(p);

编辑:是的，没问题! http://jsfiddle.net/tu2GY/

编辑 2: 好吧，我不太擅长这个，但这里是......

正如 @Extrakun 指出的，jQuery 文档确实指出该元素可能不会附加到 DOM...

As of jQuery 1.4, .before() and .after() will also work on disconnected DOM nodes.

所以，我深吸了一口气，打开了 jquery-1.4.2.js (在 vim 中 :D)，我发现无论在一个元素上传递给 .after 的是什么？ no parentNode，被用作选择器string，我认为当您传递 jQuery 对象时，它会失败。我将尝试在 一两分钟 这里发布一些我的意思的代码...(在pushStack方法内)

ret.selector = this.selector + "." + name + "(" + selector + ")";

此处的选择器最终是您传递给.after的内容。之后就没有真正了解过。