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/

score 23 · Accepted Answer · answered May 02 '12 at 22:25

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

score 2 · Answer 2 · edited Jul 25 '21 at 07:56

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/

score 1 · Answer 3 · answered May 02 '12 at 22:24

1

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

answered May 02 '12 at 22:24

ingo

5,469
1
24
19

1

Place the relevant code in the answer, not just a link to the fiddle. – Gabe May 02 '12 at 22:25

score 0 · Answer 4 · answered Apr 14 '22 at 06:27

IMHO more natural chaining looks like:

$("your_selector_to_search_root_element").append(
        $("<div />", {
            'class': someComplexCalculationForElementStateClass(conditionalInfo)
        }).append(
            $("<div class='fixed' />").append(
                "<div class='ico' />",
                "<a class='title' target='blank' href='#' >" + item.Title + "</a>",
            ),
            $("<div class='btn'>", ).append(
                "<a class='btn_link' href='#'>Remove</a>",
            )
        )
    );

jQuery append inside appended element

Works:

Does Not Work:

4 Answers4

Linked