JQuery：插入新创建的元素

我有这个代码(运行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>');

为什么？

解决方法

编辑：要修改原始集,可以将.push()一个DOM元素(不是jQuery对象)放入集合中.

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

   // Push the DOM element in
elementToAdd.push( p[0] );   // [0] gets the DOM element at index 0
$('div#container').append( elementToAdd );​

而不是.after(),使用jQuery的.add()方法.

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

 // Add the new object ----------------v
$('div#container').append( elementToAdd.add(p) );​

这将把它添加为你想要的兄弟姐妹.

它返回一个新的jQuery对象,其中两个元素都是兄弟.因为它不修改原始对象,所以需要在.append()中调用它或将结果存储在要追加的变量中.

编辑:(如在另一个答案中所述,您现在可以使用after(),例如add(),因为它返回一个新集合并且不会修改原始集合.)

为了解释原因,这是因为jQuery对象是一个DOM元素数组. DOM元素可以是具有嵌套后代的单个元素,但不能是两个兄弟元素.所以,当你执行.after()时,你正在尝试为数组中的每个元素添加一个兄弟.

为了处理兄弟姐妹,jQuery将它们作为附加项存储在其Array中.

因此,当您通过传递2个或更多兄弟元素来创建jQuery对象时,它会将它们分开,并使它们成为Array中的单独项.

var $obj = $("<div>div element</div> <span>span element</span>");

这将为您提供一个包含2个项目的数组的jQuery对象.

$obj[0] is the <div> element
$obj[1] is the <span> element

因此,如果您要单独创建它们,则需要使用.add()将新项目添加到Array.

var $obj = $("<div>div element</div>");

$obj[0] is the <div>

var $span = $("<span>span element</span>");
$obj = $obj.add( $span );

$obj[0] is the <div>
$obj[1] is the <span>