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

Question

У меня есть следующий код jQuery, который работает, но это заставило меня задуматься над тем, можно ли было добавить действие добавления к тому, что было добавлено, без необходимости указывать то, что я хотел бы добавить. 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() для добавления первого <div> к элементу с ID контейнера, так что у вас есть ссылка на этот новый элемент, а затем использовать .append():

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

Answer 2

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

Answer 3

Поскольку 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/