Est-il possible de cloner des objets éléments html en JavaScript / JQuery?

Je suis à la recherche de quelques conseils sur la façon de résoudre mon problème.

J'ai un élément html (comme la boîte de sélection champ de saisie) dans un tableau. Maintenant, je veux copier l'objet et d'en générer un nouveau de la copie, et qu'avec JavaScript ou jQuery. Je pense que cela devrait fonctionner d'une certaine manière, mais je suis un peu paumé en ce moment.

Quelque chose comme ceci (pseudo-code):

oldDdl = $("#ddl_1").get(); 

newDdl = oldDdl;

oldDdl.attr('id', newId);

oldDdl.html();
InformationsquelleAutor Richard | 2009-05-28
  1. 40

    À l'aide de votre code, vous pouvez faire quelque chose comme cela dans la plaine du JavaScript à l'aide de la cloneNode() méthode:

    //Create a clone of element with id ddl_1:
let clone = document.querySelector('#ddl_1').cloneNode( true );

//Change the id attribute of the newly created element:
clone.setAttribute( 'id', newId );

//Append the newly created element on element p 
document.querySelector('p').appendChild( clone );

    Ou à l'aide de jQuery clone() méthode (pas le plus efficace):

    $('#ddl_1').clone().attr('id', newId).appendTo('p'); //append to where you want
    • Il est TRÈS important de modifier l'ID lorsque vous clonez un élément.
    InformationsquelleAutor Boris Guéry
  2. 273

    Avec JavaScript natif:

    newelement = element.cloneNode(bool)

    où le Booléen indique si clone nœuds enfants ou pas.

    Voici la documentation complète sur MDN.

    • meilleure réponse. ne pas utiliser jquery où vous n'en auriez pas besoin.
    • Semble bon ... mais la compatibilité du navigateur est discutable dans la mesure d'aujourd'hui.
    • Je ne suis pas sûr de le 4 février, en particulier, mais compatibilité - > qui a l'air parfaite aujourd'hui
    • Les identifiants et les noms seront dupliqués. Id BESOIN d'être changé, les noms POURRAIENT être laissés tels qu'ils sont si les doublons de noms sont attendus.
    InformationsquelleAutor annakata
  3. 15

    Oui, vous pouvez copier les enfants d'un élément et de les coller dans l'autre élément:

    var foo1 = jQuery('#foo1');
var foo2 = jQuery('#foo2');

foo1.html(foo2.children().clone());

    Preuve: http://jsfiddle.net/de9kc/

    • Id en double sera un problème avec Votre approche
    InformationsquelleAutor Tadeck
  4. 3

    C'est en fait très simple en jQuery:

    $("#ddl_1").clone().attr("id",newId).appendTo("body");

    Changement .appendTo() bien sûr...

    InformationsquelleAutor Philippe Leybaert
  5. 2

    Vous pouvez utiliser clone() méthode pour créer une copie..

    $('#foo1').html( $('#foo2 > div').clone())​;

    VIOLON ICI

    InformationsquelleAutor Sushanth --
  6. 1

    Essayez ceci:

    $('#foo1').html($('#foo2').children().clone());
    InformationsquelleAutor Oscar
  7. 0

    En une seule ligne:

    $('#selector').clone().attr('id','newid').appendTo('#newPlace');
    • Je ne pense pas que l'aidera votre valeur de l'attribut est une chaîne qui ne change pas.
    InformationsquelleAutor Tamas Czinege
  8. 0

    Vous devez sélectionner "#foo2" comme sélecteur. Ensuite, l'obtenir avec du html().

    Voici le code html: 

    <div id="foo1">

</div>
<div id="foo2">
    <div>Foo Here</div>
</div>​

    Ici, c'est le javascript: 

    $("#foo2").click(function() {
    //alert("clicked");
    var value=$(this).html();
    $("#foo1").html(value);
});​

    Voici le jsfiddle: http://jsfiddle.net/fritzdenim/DhCjf/

    InformationsquelleAutor Franz Noel