La méthode Node.cloneNode() renvoie une copie du nœud sur lequel elle a été appelée.

Syntaxe

var dupNode = node.cloneNode([deep]);
node
Le noeud à dupliquer.
dupNode
Le nouveau noeud qui sera un clone du node.
deep Facultatif (profondeur)
true (vrai) si les enfants du noeud doivent aussi être clonés ou false (faux) si seul le noeud spécifié doit l'être.

Note : Dans la spécification DOM4 (telle qu'implémentée dans Gecko 13.0 (Firefox 13 / Thunderbird 13 / SeaMonkey 2.10)), deep est un argument facultatif. S'il est omis, la méthode agit comme si la valeur de  deep était true par défaut, elle utilise le clonage profond comme comportement par défaut. Pour créer un clone superficiel, deep doit être défini sur false.

Le comportement a été modifié dans la dernière spécification et, s'il est omis, la méthode doit agir comme si la valeur de deep était false. Bien que ce soit toujours facultatif, vous devriez toujours fournir l'argument deep pour la compatibilité amont et aval. Avec Gecko 28.0 (Firefox 28 / Thunderbird 28 / SeaMonkey 2.25 / Firefox OS 1.3)), la console a averti les développeurs de ne pas omettre l'argument. À partir de Gecko 29.0 (Firefox 29 / Thunderbird 29 / SeaMonkey 2.26)), un clone superficiel est défini par défaut au lieu d'un clone profond.

Exemple

p = document.getElementById("para1"); 
p_prime = p.cloneNode(true);

Notes

Cloner un nœud copie tous ses attributs ainsi que leurs valeurs, y compris les auditeurs intrinsèques (en ligne). Il ne copie pas les auditeurs d'évènement ajoutés avec addEventListener() ou ceux assignés au propriétés d'éléments (par exemple node.onclick = fn). De plus, pour un élément <canvas> l'image peinte n'est pas copiée.

Le nœud dupliqué renvoyé par cloneNode ne fera pas partie du document tant qu'il n'y est pas ajouté via la méthode Node.appendChild() ou une méthode similaire. De même, il n'a pas de parent tant qu'il n'a pas été ajouté à un autre nœud.

Si deep est défini à false, aucun des nœuds enfants n'est copié.
Tout texte contenu dans le nœud n'est pas copié non plus , car il fait partie d'un ou plusieurs nœuds Text enfants.

Si deep est évalué à true, le sous-arbre entier est copié également (y compris le texte qui peut être contenu dans des nœuds Text enfants). Pour les nœuds vides (par exemple les éléments <img> et <input> ) le fait de mettre deep à true ou false n'a aucune incidence sur la copie, mais il est tout de même nécessaire de fournir une valeur.

Attention : cloneNode() peut conduire à dupliquer des ID (identifiant) d'éléments dans un document.

Si le noeud d'origine a un identifiant et que le clone doit être placé dans le même document, l'identifiant du clone peut être modifié pour être unique. Les attributs du nom peuvent devoir être modifiés également, selon que les noms en double sont attendus.

Pour cloner un noeud à ajouter dans un document différent, utilisez  Document.importNode() à la place.

Spécification

Spécification Statut Commentaire
DOM
La définition de 'Node.cloneNode()' dans cette spécification.
Standard évolutif  
Document Object Model (DOM) Level 3 Core Specification
La définition de 'Node.cloneNode()' dans cette spécification.
Obsolete  
Document Object Model (DOM) Level 2 Core Specification
La définition de 'Node.cloneNode()' dans cette spécification.
Obsolete Définition initiale

Compatibilité des navigateurs

Nous convertissons les données de compatibilité dans un format JSON. Ce tableau de compatibilité utilise encore l'ancien format car nous n'avons pas encore converti les données qu'il contient. Vous pouvez nous aider en contribuant !

Fonctionnalité Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
deep as an optional parameter

(Oui)[1]

(Oui) 13.0 (13.0) (Oui) ?

(Oui)[1]

Fonctionnalité Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Oui) (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
deep as an optional parameter ? ? ? 13.0 (13.0) ? ? ?

[1] La valeur par défaut pour le paramètre deep est false

 

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : loella16, fscholz, teoli, jsx, Twistede, Mgjbot, BenoitL, Fredchat, Celelibi
Dernière mise à jour par : loella16,