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

Question

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

Quelque chose comme ceci (pseudo code) :

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

newDdl = oldDdl;

oldDdl.attr('id', newId);

oldDdl.html();

Answer 1

Avec le JavaScript natif :

newelement = element.cloneNode(bool)

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

Voici la documentation complète sur MDN .

Answer 2

En utilisant votre code, vous pouvez faire quelque chose comme cela en JavaScript simple en utilisant la fonction 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 en utilisant jQuery clone() (pas la plus efficace) :

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

Answer 3

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 4

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

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

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

Answer 5

Utiliser

oElement = oldElem.cloneNode(true);