jQuery附加在附加元素中

我有以下jQuery代码可以工作，但它让我思考，如果有可能对附加的内容执行追加操作，而无需指定我想要追加的内容。 append().append()没有做到这一点，它只是将两个元素放在一起，而不是第一个append()动作的子元素。

作品：

 var container = $('#container'), child = 'child'; $('#container').append($('
',{ 'id' : 'child' })); $('#' + child).append($('', { 'class' : 'close', 'href' : 'javascript:;', html : 'close', click : function(e){ e.preventDefault(); $('#' + child).remove(); } })); 

不起作用：

 var container = $('#container'), child = 'child'; $('#container').append($('
',{ 'id' : 'child' })).append($('', { 'class' : 'close', 'href' : 'javascript:;', html : 'close', click : function(e){ e.preventDefault(); $('#' + child).remove(); } })); 

http://jsfiddle.net/Y8TwW/1/

Answer 1

您可以使用.appendTo()将第一个

附加到具有ID容器的元素，以便您可以引用该新元素，然后使用.append() ：

 $('
',{ 'id' : 'child' }).appendTo('#container').append( $('', { 'class' : 'close', 'href' : 'javascript:;', html : 'close', click : function(e){ e.preventDefault(); $('#' + child).remove(); } }) ); 

Answer 2

因为append不会返回对附加内容的引用。 它指的是同一个对象，即第一个附加后的container ，或者无论你要运行多少个附加。 因此，正如其他建议使用appendto或您可以使用以下更好地说明您失败的原因。

  var container = $('#container'), child = 'child'; $('#container').append($('
',{ 'id' : 'child' })).find('#' + child).append($('', { 'class' : 'close', 'href' : 'javascript:;', html : 'close', click : function(e){ e.preventDefault(); $('#' + child).remove(); } }));​ 

小提琴http://jsfiddle.net/Y8TwW/3/

Answer 3

我使用appendto然后追加http://jsfiddle.net/Y8TwW/2/

 var container = $('#container'), child = 'child'; $('
', { 'id': child } ).appendTo(container ).append($('', { 'class' : 'close', 'href' : 'javascript:;', html : 'close', click : function(e){ e.preventDefault(); $('#' + child).remove(); } }));