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

Je cherche des conseils pour résoudre mon problème.

J'ai un élément html (comme le champ de saisie de la boîte 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 fonctionner d'une manière ou d'une autre, mais je suis un peu désemparé pour le moment.

Quelque chose comme ça (pseudo code):

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

newDdl = oldDdl;

oldDdl.attr('id', newId);

oldDdl.html();

En utilisant votre code, vous pouvez faire quelque chose comme ça en JavaScript brut en utilisant la méthode cloneNode () :

// 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 la méthode jQuery clone () (pas la plus efficace):

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

Avec 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 .

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/

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

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

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

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

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

FIDDLE ICI

Essaye ça:

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

En une seule ligne:

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

Vous devez sélectionner "# foo2" comme sélecteur. Ensuite, récupérez-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/