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