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

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

J'ai un élément html (comme le champ de saisie select box) dans une table. Maintenant, je veux copier l'objet et en générer un nouveau à partir de la copie, et cela avec JavaScript ou jQuery. Je pense que cela devrait fonctionner en quelque sorte, mais je suis un peu désemparé en ce moment.

Quelque chose comme ceci (pseudo code):

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

newDdl = oldDdl;

oldDdl.attr('id', newId);

oldDdl.html();
77
demandé sur luiges90 2009-05-28 18:58:03

8 réponses

La manière jQuery (pas la plus efficace):

Regardez la méthode clone () de JQuery

En utilisant votre code, vous pouvez faire quelque chose comme ça:

$('#ddl_1').clone().attr('id', newId).appendTo('p'); // append to where you want
34
répondu Boris Guéry 2013-01-08 16:45:16

Avec JavaScript natif:

newelement = element.cloneNode(bool)

Où le booléen indique s'il faut cloner des nœuds enfants ou non.

Voici la documentation complète sur MDN.

250
répondu annakata 2018-09-27 23:06:04

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/

15
répondu Tadeck 2012-09-28 00:23:22

C'est en fait très facile dans jQuery:

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

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

3
répondu Philippe Leybaert 2009-05-28 15:00:16

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

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

FIDDLE ICI

2
répondu Sushanth -- 2012-09-28 00:45:18

Essayez ceci:

$('#foo1').html($('#foo2').children().clone());
1
répondu Oscar Jara 2012-09-28 00:30:27

Dans une ligne:

$('#selector').clone().attr('id','newid').appendTo('#newPlace');
0
répondu Tamas Czinege 2009-05-28 15:01:08

Vous devez sélectionner "#foo2" comme sélecteur. Ensuite, obtenez-le avec html ().

Voici le html:

<div id="foo1">

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

Voici le javascript:

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

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

0
répondu Franz Noel 2012-09-28 00:33:37