jQuery 在 append 元素内 append

Question

我有以下有效的 jQuery 代码，但它让我思考是否可以对正在 append 的内容执行 append 操作，而无需指定我想要 append 的内容。 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/

Answer 1

您可以使用 .appendTo() append 第一个 <div>到具有 ID 容器的元素，以便您可以引用该新元素，然后使用 .append() :

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