Node : méthode cloneNode()

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

En savoir plus
Voir la compatibilité complète

La méthode cloneNode() de l'interface Node retourne une copie du nœud sur lequel cette méthode a été appelée. Son paramètre contrôle si le sous-arbre contenu dans le nœud est également cloné ou non.

Par défaut, le clonage d'un nœud copie tous ses attributs et leurs valeurs, y compris les écouteurs d'évènements définis par des attributs. En définissant le paramètre deep, vous pouvez également copier le sous-arbre contenu dans le nœud. Il ne copie pas d'autres données internes, telles que les écouteurs d'évènements ajoutés à l'aide de addEventListener() ou des propriétés onevent (par exemple, node.onclick = someFunction), ou l'image peinte pour un élément HTML <canvas>.

La méthode Document.importNode() crée également une copie d'un nœud. La différence est que importNode() clone le nœud dans le contexte du document appelant, tandis que cloneNode() utilise le document du nœud cloné. Le contexte du document détermine le CustomElementRegistry pour la construction de tout élément personnalisé. Pour cette raison, pour cloner des nœuds à utiliser dans un autre document, utilisez importNode() sur le document cible. Le HTMLTemplateElement.content appartient à un document séparé, il doit donc également être cloné en utilisant document.importNode() afin que les descendants des éléments personnalisés soient construits en utilisant les définitions du document actuel.

Attention : cloneNode() peut entraîner des ID d'éléments en double dans un document ! Si le nœud d'origine a un attribut id, et que le clone est placé dans le même document, vous devez modifier l'ID du clone pour qu'il soit unique.

De même, les attributs name peuvent devoir être modifiés, en fonction de la manière dont les noms en double sont attendus.

Syntaxe

cloneNode()
cloneNode(deep)

Paramètres

deep Facultatif

Si true, le nœud et tout son sous-arbre, y compris le texte qui peut se trouver dans des nœuds Text enfants, sont également copiés.

Si false ou omis, seul le nœud est cloné. Le sous-arbre, y compris tout texte que le nœud contient, n'est pas cloné.

Notez que deep n'a aucun effet sur les éléments vides, tels que les éléments HTML <img> et <input>.

Exemples

Utiliser `cloneNode()`

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

Utiliser `cloneNode()` avec des modèles

Évitez d'utiliser cloneNode() sur le contenu d'un élément HTML <template>, car si le modèle contient des éléments personnalisés, ils ne sont pas mis à jour tant qu'ils ne sont pas insérés dans le document.

class MonElement extends HTMLElement {
  constructor() {
    super();
    console.log("MonElement créé");
  }
}
customElements.define("mon-element", MonElement);

const template = document.createElement("template");
template.innerHTML = `<mon-element></mon-element>`;

const clone = template.content.cloneNode(true);
// Pas de journalisation ici ; mon-element n'est pas défini dans le document du modèle
customElements.upgrade(clone);
// Toujours pas de journalisation ; mon-element n'est toujours pas défini dans le document du modèle
document.body.appendChild(clone);
// Journalisation "MonElement créé" ; mon-element est maintenant mis à jour

Au lieu de cela, utilisez document.importNode() pour cloner le contenu du modèle, afin que tous les éléments personnalisés soient mis à jour en utilisant les définitions du document actuel :

const clone = document.importNode(template.content, true);
// Journalisation "MonElement créé" ; mon-element est mis à jour en utilisant les définitions du document
document.body.appendChild(clone);