Ajout d'un élément DOM deux fois (jQuery)

Quelqu'un peut m'expliquer pourquoi le code suivant ne pas ajouter <foo> à la fois #a et #b?

HTML:

<div id="a"></div>
<div id="b"></div>

JS:

$(function(){
    var $foo = $("<foo>HI</foo>");
    $("#a").append($foo);
    $("#b").append($foo);
});

jsfiddle

Edit: merci pour les conseils, le fait que .append() déplace l'élément explique ce comportement. Puisque l'élément dans mon application est en fait l'épine Dorsale de la Vue .elje préfère ne pas le clone.

source d'informationauteur parsa | 2013-07-16

  1. 17

    Parce que l'utilisation de append en train de se déplacer l'élément. De sorte que votre code a été de passer $foo dans le document à #apuis en le déplaçant d' #a à #b. On pourrait cloner place comme ceci pour l'effet désiré - de cette façon, il est l'ajout d'un clone plutôt que l'élément initial:

    $(function(){
    var $foo = $("<foo>HI</foo>");
    $("#a").append($foo.clone());
    $("#b").append($foo.clone());
});

    Vous pourriez également ajouter le html de $fooqui serait juste prendre le dom à l'intérieur plutôt que de l'élément lui-même:

    $(function(){
    var $foo = $("<foo>HI</foo>");
    $("#a").append($foo[0].outerHTML);
    $("#b").append($foo[0].outerHTML);
});

    Les exemples ci-dessus sont en supposant que vous avez une plus compliqué scénario où $foo n'est pas seulement un objet jQuery créé à partir d'une chaîne... plus probable, il est créé à partir d'un élément dans votre DOM.

    Si elle est en fait tout simplement créé de cette façon, et pour cela... il n'y a aucune raison de créer cet objet jQuery pour commencer, vous pouvez simplement ajouter la chaîne elle-même ("<foo>HI</foo>") directement, comme:

    var foo = "<foo>HI</foo>";
$("#a").append(foo);
//...
  2. 10

    Essayer clone. Ce qui, comme son nom l'indique, permet de copier le $foo élément et de ne pas bouger, comme append fera.

    $(function(){
    var $foo = $("<foo>HI</foo>");
    $("#a").append($foo.clone());
    $("#b").append($foo.clone());
});

    Mais, pourquoi ne pas l'utiliser?

    $("#a,#b").append($foo);

    Cela fonctionnera également 🙂

    Voici une démo pour ces deux situations : http://jsfiddle.net/hungerpain/sCvs7/3/

  3. 9

    Vous devez create a new instance chaque fois que vous souhaitez ajouter à la DOM.

    Sinon, il se réfère à la même instance qui a déjà été ajouté.

    Supprimer la $ symbole précédant la nouvelle div être ajouté en tant que évalue à un objet jQuery et a les limites indiquées ci-dessus. ou clone l'élément.

    $(function(){
    var foo = "<foo>HI</foo>";
    $("#a").append(foo);
    $("#b").append(foo);
});

    Vérifier le Violon

  4. 4

    Vous pouvez utiliser le .méthode clone() pour créer une nouvelle instance à ajouter au DOM, depuis votre code actuel, renvoie à la même instance à deux reprises.

    $(function(){
    var $foo = $("<foo>HI</foo>");
    var $foo2 = foo.clone();
    $("#a").append($foo);
    $("#b").append($foo2);
});