jQuery cloneTo au lieu de appendTo?

Question

J'essaie d'utiliser jquery appendTo pour copier un élément dans un autre conteneur. L'objet est en effet ajouté mais il est supprimé de la source. Y a-t-il un moyen d'ajouter l'élément en laissant l'élément source où il se trouve? appelez-le copier appelez-le clone appelez-le comme vous voulez.

Voici mon code actuel:

jQuery(document).ready(function() 
{ 
    jQuery('#button').appendTo('#panel'); //button should appear ALSO in panel. 
}); 

Answer 1

Fermer, mais pas assez près. Le code ci-dessous va clone() l'élément, puis l'ajouter en #panel.

jQuery(document).ready(function() 
{ 
    jQuery('#button').clone().appendTo('#panel'); 
}); 

Notez qu'il est par rapport aux normes d'avoir un ID utilisé deux fois dans la même page. Donc, pour résoudre ce problème:

jQuery(document).ready(function() 
{ 
    jQuery('#button').clone().attr('id', 'newbutton').appendTo('#panel'); 
}); 

Answer 2

Le code que vous devez exécuter est:

Ce que cela fait est gagner le nœud du DOM et fait alors un clone de celui-ci dans la mémoire. La ligne prend alors ce nouvel objet (jQuery('#button').clone()) et l'ajoute de nouveau dans le DOM au #panel. C'est toujours une bonne stratégie: essayez de manipuler votre DOM en touchant le DOM le moins possible. Vous pouvez faire des tonnes de manipulation de nœuds et d'éléments sans les insérer ou les ajouter jusqu'à la fin.

Answer 3

Il suffit d'appeler la méthode clone() sur votre objet jQuery sélectionné avant annexant:

$('#button').clone().appendTo('#panel'); 

Si vous devez cloner aussi tous les gestionnaires d'événements attachés aux éléments sélectionnés, passer true booléen comme paramètre à la clone() méthode.

En outre, vous pouvez voulez modifier l'attribut id de l'élément sélectionné ... Ce est aussi facile que:

$('#button').clone().attr('id', 'button-clone').appendTo('#panel');