jQuery ajouter annexé à l'intérieur de l'élément

J'ai le texte suivant jQuery code qui fonctionne, mais il m'a fait me demander si il était possible de faire un ajout de l'action sur ce qui a été ajouté sans avoir besoin de spécifier ce que je voulais ajouter à. append().append() n'ai pas fait le tour, il vient de mettre les deux éléments les uns à côté des autres et non pas un enfant de la première append() action.

Travaux:

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

Ne Fonctionne Pas:

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/

InformationsquelleAutor | 2012-05-02
  1. 20

    Vous pouvez utiliser .appendTo() à ajouter la première <div> à l'élément avec l'ID du conteneur, de sorte que vous avez une référence à ce nouvel élément, puis utilisez .append():

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

    Parce que append ne retourne pas de référence à l'ajouté de contenu. Il est fait référence au même objet, c'est à dire container après le premier ajout, ou n'importe comment beaucoup de ajoute que vous exécutez. Alors que d'autres ont suggéré l'utilisation appendto ou vous pouvez utiliser l'exemple suivant que mieux démontrer pourquoi vous avez été un échec.

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

    Violon http://jsfiddle.net/Y8TwW/3/

    InformationsquelleAutor Ehtesham
  3. 1

    J'utiliserais appendto puis d'en ajouter
    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();
    }
}));
    • Placez le code correspondant à la réponse, pas juste un lien pour le violon.
    InformationsquelleAutor ingo