jQuery append inside appended element

Question

I have the following jQuery code which works, but it made me ponder if it were possible to do an append action on what was being appended without the need of specifying what I wanted to append to. append().append() didn't do the trick, it just put the two elements next to each other and not a child of the first append() action.

Works:

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();
    }
}));

Does Not Work:

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

Because append doesn't return reference to the appended content. It is referring to the same object i.e. container after the first append, or no matter how many appends you would run. So as other suggested use appendto or you can use the following that better demonstrate why you were failing.

    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/

Answer 2

You can use .appendTo() to append the first <div> to the element with ID container, so that you have a reference to that new element, then use .append():

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

Answer 3

I'd use the appendto and then append 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();
    }
}));