HTML DOM Element cloneNode() methode

Definitie en gebruik

cloneNode() Methode om een kopie van het knooppunt te maken en deze retour te geven.

cloneNode() Methode om alle eigenschappen en hun waarden te klonen.

Als je ook de afstammelingen (kinderen) wilt klonen, stel dan de deep parameter in op true.

Terugplaatsen

Om de gekloonde knooppunten terug in het document in te voegen, gebruik dan:

appendChild() methode

insertBefore() methode

Zie ook:

adoptNode() methode

importNode() methode

createElement() methode

createTextNode() methode

Voorbeeld

Voorbeeld 1

Kopieer het <li> element van "myList2" naar "myList1":

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

Voor cloning:

  • Koffie
  • Thee
  • Water
  • Melk

Na cloning:

  • Koffie
  • Thee
  • Melk
  • Water
  • Melk

Probeer het zelf

Voorbeeld 2

Kopieer het "demo" element, inclusief zijn eigenschappen en onderliggende elementen, en voeg het toe aan het document:

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

Probeer het zelf

Syntax

node.cloneNode(deep)

Parameter

Parameter Beschrijving
deep

Optioneel.

  • false - Standaard. Kloon alleen knooppunten en hun eigenschappen
  • true - Kloon knooppunten, hun eigenschappen en afstammelingen

Retourwaarde

Type Beschrijving
Node object De gekloonde knooppunten.

Browserondersteuning

element.cloneNode() Is een DOM Level 1 (1998) kenmerk.

Alle browsers ondersteunen het volledig:

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