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.
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.