JQuery:插入到新创建的元素中

编辑: 要修改原始集,可以 .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() .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()

.after() 数组中的单个元素。

因此,当您通过传递两个或多个同级元素来创建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>

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

试试这个

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

是的,很好用! http://jsfiddle.net/tu2GY/

好吧,我不太擅长这个,但我要说的是。。。

正如@Extrakun指出的,jQuery文档确实注意到元素可能没有附加到DOM。。。

从jquery1.4开始, .before() .after()

所以,我深吸了一口气,打开jquery-1.4.2.js(在vim:D中),我发现无论传递给什么 .之后 在一个元素上 parentNode 一串 我认为在传递jQuery对象时失败了。我会试着把我的意思写出来 在这里。。。(内部) pushStack

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

这个 selector 这就是你传递给别人的东西 .之后 . 在那之后就没什么关系了。

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

e.after(p) 退货 不 实际上,改变e,它在一个链中工作,它在断开连接的情况下工作,但不会像你期望的那样工作。

“elementToAdd”不是指向元素的jQuery对象。试试这个:

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

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

问题是,插入带有.before和.after的断开连接的DOM节点只适用于jQuery1.4(及其派生版本)。

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

对于所有最新的jQuery版本,还可以使用附加的对象来插入DOM节点:

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