web-dev-qa-db-fra.com

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

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

J'ai un élément html (comme un champ de saisie de zone de sélection) dans un tableau. 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, 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();
javascriptjquerycloneelements
90
Richard

En utilisant votre code, vous pouvez faire quelque chose comme ceci en JavaScript simple 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
43
Boris Guéry

Avec JavaScript natif:

newelement = element.cloneNode(bool)

où la valeur booléenne indique s'il faut cloner ou non des nœuds enfants.

Voici la documentation complète sur MDN .

276
annakata

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/

16
Tadeck

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

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

Changer .appendTo () bien sur ...

3
Philippe Leybaert

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

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

FIDDLE ICI

2
Sushanth --

Essaye ça:

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

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

0
Franz Noel

En une ligne:

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