Méthode cloneNode() de l'élément DOM HTML

Définition et utilisation

Méthode cloneNode() La méthode crée une copie du nœud et renvoie cette copie.

Méthode cloneNode() La méthode cloneNode() clone tous les attributs et leurs valeurs.

Si vous souhaitez également克隆 les descendants (fils), configurez le paramètre deep à true.

Insérer

Pour insérer le nœud克隆né dans le document, utilisez :

Méthode appendChild()

Méthode insertBefore()

Voir également :

Méthode adoptNode()

Méthode importNode()

Méthode createElement()

Méthode createTextNode()

Exemple

Exemple 1

Copiez l'élément <li> de "myList2" à "myList1" :

const node = document.getElementById("myList2").lastChild;
const clone = node.cloneNode(true);
document.getElementById("myList1").appendChild(clone);

Avant la duplication :

  • Café
  • Thé
  • Eau
  • Lait

Après la duplication :

  • Café
  • Thé
  • Lait
  • Eau
  • Lait

Essayez-le vous-même

Exemple 2

Copiez l'élément "demo", y compris ses attributs et ses éléments enfants, et ajoutez-le au document :

const node = document.getElementById("demo");
const clone = node.cloneNode(true);
document.body.appendChild(clone);

Essayez-le vous-même

Syntaxe

node.cloneNode(deep)

Paramètre

Paramètre Description
deep

Optionnel.

  • false - Par défaut. Ne clone que le nœud et ses attributs
  • true - Clone le nœud, ses attributs et ses descendants

Valeur de retour

Type Description
Objet Node Le nœud克隆né.

Support du navigateur

element.cloneNode() C'est une fonctionnalité du DOM Level 1 (1998).

Tous les navigateurs le supportent complètement :

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support 9-11 Support Support Support Support