JQuery:插入新创建的元素

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 ...

从jQuery 1.4开始,.before()也.after()将在断开连接的DOM节点上工作.

所以,我深呼吸并打开了jquery-1.4.2.js(在vim:D中),我发现无论是什么传递给.after一个没有 的元素parentNode,都被用作选择器字符串,我认为传递jQuery对象时失败.我会尝试在一两分钟内发布一些我的意思代码......(内部pushStack方法)

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

这selector就是最终成为你传递给你的东西.after.那之后真的没多大意义.

Answer 2

编辑：要修改原始集合，您可以将.push()DOM 元素（不是 jQuery 对象）放入集合中。

\n\n

var elementToAdd = $(\'<h3>\').html(\'header\');\nvar p = $(\'<p>\').html(\'hello world\');\n\n   // Push the DOM element in\nelementToAdd.push( p[0] );   // [0] gets the DOM element at index 0\n$(\'div#container\').append( elementToAdd );\xe2\x80\x8b\n

\n\n\n\n

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

\n\n

var elementToAdd = $(\'<h3>\').html(\'header\');\nvar p = $(\'<p>\').html(\'hello world\');\n\n // Add the new object ----------------v\n$(\'div#container\').append( elementToAdd.add(p) );\xe2\x80\x8b\n

\n\n

这将按照您想要的方式将其附加为同级。

\n\n

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

\n\n\n\n

编辑：（ 正如另一个答案中所述，您现在可以使用after()like add()，因为它返回一个新集合并且不会修改原始集合。）

\n\n

解释一下原因，这是因为 jQuery 对象是 DOM 元素的数组。DOM 元素可以是具有嵌套后代的单个元素，但不能是两个同级元素。因此，当您这样做时.after()，您正在尝试向数组中的每个元素添加一个同级元素。

\n\n

为了处理同级，jQuery 将它们作为附加项存储在其数组中。

\n\n

因此，当您通过传递 2 个或更多同级元素来创建 jQuery 对象时，它会将它们分开，并使它们成为数组中单独的项目。

\n\n

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

\n\n

这将为您提供一个 jQuery 对象，其中包含 2 个项目的数组。

\n\n

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

\n\n

因此，如果您要单独创建它们，则需要使用将.add()新项目添加到数组中。

\n\n

var $obj = $("<div>div element</div>");\n\n$obj[0] is the <div>\n\nvar $span = $("<span>span element</span>");\n$obj = $obj.add( $span );\n\n$obj[0] is the <div>\n$obj[1] is the <span>\n

\n