jQuery append inside appended element

append, jquery

Solution

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

Problem

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/

Original source