Node.
Crée une copie d’un nœud. Avec l’argument true, elle copie aussi tout le contenu, c’est-à-dire tous les éléments et textes à l’intérieur.
- Renvoie
- Un nouveau nœud, copie de l’original, pas encore connecté au document.
Exemple
#const list = document.querySelector('#courses')
const original = list.querySelector('.course')
const deep = original.cloneNode(true)
const shallow = original.cloneNode()
deep.querySelector('strong').textContent = 'CSS'
list.append(deep)
console.log(list.children.length)
console.log(original.textContent)
console.log(deep.textContent)
console.log(shallow, shallow.childNodes.length)Définition et utilisation
#La méthode cloneNode() renvoie une copie de l’élément ou d’un autre nœud. La copie a les mêmes attributs, classes et styles inline, mais c’est un nouvel objet indépendant : elle n’est pas encore dans le document, et les changements apportés à la copie n’affectent pas l’original. Pour l’afficher, insérez-la, par ex. avec append().
L’argument deep détermine le contenu copié. cloneNode(true) copie l’élément avec tous ses descendants et son texte. cloneNode() sans argument (ou avec false) crée une copie superficielle : seulement l’élément avec ses attributs, mais vide à l’intérieur. En pratique, vous avez presque toujours besoin de true.
La copie ne reprend pas les écouteurs d’événements ajoutés par addEventListener(), ni les propriétés personnalisées ajoutées à l’objet de l’élément en JavaScript. Les attributs sont en revanche copiés, y compris id, donc après l’insertion de la copie sur la page, il y aurait deux éléments avec le même identifiant. Changez-le ou supprimez-le avant l’insertion.
Le clonage s’associe souvent à l’élément <template> : vous copiez son contenu (template.content) avec cloneNode(true), vous le remplissez de données et vous l’insérez dans la page. C’est un moyen pratique de créer des fragments répétitifs, par ex. des cartes de cours.
Syntaxe
#node.cloneNode()
node.cloneNode(deep)Paramètres
#deep
booléen, optionnel
truecopie le nœud avec tout son contenu. Par défautfalse, c’est-à-dire une copie sans enfants.
Plus d’exemples
#const button = document.querySelector('#hint')
button.addEventListener('click', () => console.log('Indice de l’original'))
const copy = button.cloneNode(true)
copy.id = 'hint-copy'
document.querySelector('#toolbar').append(copy)
copy.click()
button.click()
console.log(copy.id, copy.className)Cliquer sur la copie n’affiche rien, car cloneNode() transfère les attributs, mais pas les écouteurs ajoutés par addEventListener(). La copie a aussi reçu un nouvel id, pour ne pas dupliquer l’identifiant.
const template = document.querySelector('#card-template')
const cards = document.querySelector('#cards')
const courses = [
{ title: 'HTML', points: 120 },
{ title: 'CSS', points: 90 }
]
for (const course of courses) {
const card = template.content.cloneNode(true)
card.querySelector('h3').textContent = course.title
card.querySelector('.points').textContent = `${course.points} pts`
cards.append(card)
}
console.log(cards.children.length)
console.log(cards.querySelector('.card:last-child h3').textContent)Le contenu de <template> n’est pas affiché sur la page, il sert seulement de modèle. Chaque cloneNode(true) donne une copie neuve, que nous remplissons avec d’autres données.
Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Appelez presque toujours
cloneNode(true). Sans argument, vous obtiendrez un élément vide, sans texte ni enfants. - Après le clonage, changez ou supprimez l’
id, pour qu’il n’y ait pas deux éléments avec le même identifiant sur la page. - Rattachez les écouteurs d’événements à la copie, ou gérez les clics sur un parent commun (délégation d’événements).
Entrées associées
#- Element.append()Ajoute des éléments ou du texte à la fin du contenu d’un élément.
- document.createElement()Crée un nouvel élément HTML avec le nom de balise donné, prêt à être inséré dans la page.
- Element.replaceWith()Remplace un élément du document par d’autres éléments ou du texte. L’ancien élément est retiré de la page.
- Element.childrenUne collection vivante des enfants directs d’un élément. Avec parentElement et nextElementSibling, elle sert à se déplacer dans l’arbre DOM.
- EventTarget.addEventListener()Enregistre une fonction appelée à chaque fois qu’un événement se produit sur un élément, par ex. un clic.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.