HTML DOM Element cloneNode() -menetelmä

Määrittely ja käyttö

cloneNode() Metodi luo solmun kopion ja palauttaa tämän kopion.

cloneNode() Metodi kloonaa kaikki ominaisuudet ja niiden arvot.

Jos haluat kloonata jälkeläiset (lapsisolut) myös, aseta deep-parametri true.

Palauta

Jos haluat palauttaa kloonatun solmun dokumenttiin, käytä:

appendChild() -menetelmä

insertBefore() -menetelmä

Katso myös:

adoptNode() -menetelmä

importNode() -menetelmä

createElement() -menetelmä

createTextNode() -menetelmä

Esimerkki

Esimerkki 1

Kopioi <li>-elementti "myList2":sta "myList1":hen:

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

Kloonauksen ennen:

  • Kahvi
  • Teekannu
  • Vesi
  • Maito

Kloonauksen jälkeen:

  • Kahvi
  • Teekannu
  • Maito
  • Vesi
  • Maito

Kokeile itse

Esimerkki 2

Kopioi "demo"-elementti, mukaan lukien sen ominaisuudet ja lapsisolut, ja lisää se dokumenttiin:

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

Kokeile itse

Syntaksi

node.cloneNode(deep)

Parametri

Parametri Kuvaus
deep

Valinnainen.

  • false - Oletus. Vain solmun ja sen ominaisuudet kloonataan
  • true - Kloonaa solmu, sen ominaisuudet ja jälkeläiset

Palautusarvo

Tyyppi Kuvaus
Node-objekti Kloonatut solmut.

Selaimen tuki

element.cloneNode() Se on DOM Level 1 (1998) ominaisuus.

Kaikki selaimet tukevat sitä täysin:

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