【问题标题】：jQuery append inside appended elementjQuery在附加元素内追加
【发布时间】：2012-05-12 10:39:23
【问题描述】：

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

作品：

var container = $('#container'),
    child = 'child';

$('#container').append($('<div/>',{
    'id'    : 'child'
}));

$('#' + child).append($('<a/>', {
    'class' : 'close',
    'href'  : 'javascript:;',
    html    : 'close',
    click   : function(e){
        e.preventDefault();
        $('#' + child).remove();
    }
}));

不起作用：

var container = $('#container'),
    child = 'child';

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

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

【问题讨论】：

标签： jquery append

【解决方案1】：

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

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

【讨论】：

将相关代码放在答案中，而不仅仅是指向小提琴的链接。

【解决方案2】：

您可以使用.appendTo() 将第一个<div> 附加到具有ID 容器的元素，这样您就可以引用该新元素，然后使用.append()：

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

【讨论】：

【解决方案3】：

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

var container = $('#container'),
child = 'child';

$('#container').append($('<div/>',{
    'id'    : 'child'
})).find('#' + child).append($('<a/>', {
    'class' : 'close',
    'href'  : 'javascript:;',
     html   : 'close',
     click  : function(e){
        e.preventDefault();
        $('#' + child).remove();
     }
}));

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

【讨论】：