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

Question

Je suis à la recherche de quelques astuces pour résoudre mon problème.

J'ai un élément html (comme un champ de sélection de zone de sélection) 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 marcher, mais je suis un peu désemparé pour le moment.

Quelque chose comme ça (pseudo code):

Answer 1

La façon jQuery (pas le plus efficace):

Regardez la méthode clone() de JQuery

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

$('#ddl_1').clone().attr('id', newId).appendTo('p'); // append to where you want 

Answer 2

C'est en fait très facile dans jQu rès:

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

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

Answer 3

en une ligne:

$('#selector').clone().attr('id','newid').appendTo('#newPlace'); 

Answer 4

Avec javascript natif:

newelement = element.cloneNode(bool) 

où le booléen indique si pour cloner des noeuds enfants ou non

Answer 5

Oui, vous pouvez copier les enfants d'un élément et 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/

Answer 6

Essayez ceci:

$('#foo1').html($('#foo2').children().clone()); 

Answer 7

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

Voici le code 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/

Answer 8

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

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

FIDDLE HERE