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的 no的元素 parentNode，被用作选择器 string ，我认为在传递jQuery对象时失败了。我会尝试在一两分钟内发布一些我的意思~~的代码~~ ......（在pushStack方法内）

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

selector这里最终会传递给.after。那之后真的没什么了不起。

Answer 2

编辑：要修改原始集，您可以将.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 );

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

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将它们作为附加项存储在其数组中。

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

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()将新项目添加到数组中。

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>

Answer 3

有趣。添加临时作品：

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

...所以我猜测e.after(p) 返回“p后e”，但实际上不会改变e。所以它在一个链中起作用，它可以断开连接，但不会像你期望的那样工作。

Answer 4

'elementToAdd'不是指向该元素的jQuery对象。试试这个：

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

Answer 5

操作dom是一项昂贵的操作，最好尽量少做，上面的代码可以很容易地改为，

$('div#content').append('<h3>header</h3><p>hello world</p>');

Answer 6

问题是，使用.before和.after插入断开连接的DOM节点只能在jQuery 1.4（以及衍生产品）中使用。

<script src="jquery-1.4.js"></script>
<script>
  $('<div/>').after('<p>Test</p>').filter('p').appendTo('body');
</script>

Answer 7

对于所有最近的jQuery版本，您还可以使用附加的对象来插入DOM节点：

<script>
  $("<span/>", {
    class: "test",
    html: "<p><b>Click me!</b></p>"
  }).appendTo( "body" );
</script>

JQuery：插入新创建的元素

7 个答案: