JQuery append внутри добавленного элемента

У меня есть следующий код jQuery, который работает, но он заставлял меня задуматься над тем, можно ли было выполнить действие 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/

Ответ 1

Вы можете использовать .appendTo(), чтобы добавить первый <div> к элементу с контейнером ID, чтобы у вас была ссылка на этот новый элемент, затем используйте .append():

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

Ответ 2

Потому что 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();
         }
    }));

Fiddle http://jsfiddle.net/Y8TwW/3/

Ответ 3

Я бы использовал 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();
    }
}));