jQuery append innerhalb angehängt Element

Question

Ich habe den folgenden jQuery-Code, der funktioniert, aber es ließ mich darüber nachdenken, ob es möglich wäre, eine Append-Aktion auf was angehängt wurde, ohne die Notwendigkeit zu spezifizieren, was ich anhängen wollte. append().append() hat nicht den Trick gemacht, es nur die beiden Elemente nebeneinander und kein Kind der ersten append() Aktion.

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

funktioniert nicht:

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

Sie können .appendTo() verwenden, um die erste <div> auf das Element mit der ID Behälter anzuhängen, so dass Sie einen Verweis auf das neue Element, dann .append() verwenden:

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

Answer 2

würde ich die appendto verwenden und dann hängen Sie 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

Da append nicht Bezug auf die beigefügte Rück Inhalt. Es bezieht sich auf das gleiche Objekt, d. H. container nach dem ersten Anhängen, oder egal wie viele Anhängen Sie ausführen würden. So wie andere vorgeschlagene Verwendung oder Sie können die folgenden verwenden, die besser zeigen, warum Sie versagten.

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/