.clone()

La méthode .clone() effectue une copie profonde de l’ensemble des éléments appariés, ce qui signifie qu’elle copie les éléments appariés ainsi que tous leurs éléments et nœuds de texte descendants.

Lorsqu’il est utilisé conjointement avec l’une des méthodes d’insertion, .clone() est un moyen pratique de dupliquer des éléments sur une page. Considérez le HTML suivant :

<div class="container">
 <div class="hello">Hello</div>
 <div class="goodbye">Goodbye</div>
</div>

Comme le montre la discussion sur .append(), normalement, lorsqu’un élément est inséré quelque part dans le DOM, il est déplacé de son ancien emplacement. Donc, étant donné le code :

La structure DOM résultante serait :

<div class="container">
 <div class="goodbye">
 Goodbye
 <div class="hello">Hello</div>
 </div>
</div>

Pour éviter cela et créer plutôt une copie de l’élément, vous pourriez écrire ce qui suit :

$( ".hello" ).clone().appendTo( ".goodbye" );

Ceci produirait :

<div class="container">
 <div class="hello">Hello</div>
 <div class="goodbye">
 Goodbye
 <div class="hello">Hello</div>
 </div>
</div>

Normalement, les éventuels gestionnaires d’événements liés à l’élément original ne sont pas copiés sur le clone. Le paramètre optionnel withDataAndEvents nous permet de modifier ce comportement, et de faire plutôt des copies de tous les gestionnaires d’événements également, liés à la nouvelle copie de l’élément. À partir de jQuery 1.4, toutes les données de l’élément (attachées par la méthode .data()) sont également copiées sur la nouvelle copie.

Toutefois, les objets et les tableaux au sein des données de l’élément ne sont pas copiés et continueront à être partagés entre l’élément cloné et l’élément d’origine. Pour copier en profondeur toutes les données, copiez chacune d’entre elles manuellement :

// Original element with attached data
var $elem = $( "#elem" ).data( "arr", ),
 $clone = $elem.clone( true )
 // Deep copy to prevent data sharing

A compter de jQuery 1.5, withDataAndEvents peut être éventuellement enrichi de deepWithDataAndEvents pour copier les événements et les données de tous les enfants de l’élément cloné.