Metoda cloneNode() obiektu HTML DOM Element

Definicja i użycie

Metoda cloneNode() Tworzy kopię węzła i zwraca kopię.

Metoda cloneNode() Metoda klonuje wszystkie atrybuty oraz ich wartości.

Jeśli chcesz sklonować potomków (potomków), ustaw parametr deep na true.

Wstawienie z powrotem

Aby wstawić sklonowany węzeł z powrotem do dokumentu, użyj:

Metoda appendChild()

Metoda insertBefore()

Zobacz również:

Metoda adoptNode()

Metoda importNode()

Metoda createElement()

Metoda createTextNode()

Przykład

Przykład 1

Skopiuj element <li> z "myList2" do "myList1":

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

Przed klonowaniem:

  • Kawa
  • Herbata
  • Woda
  • Mleko

Po klonowaniu:

  • Kawa
  • Herbata
  • Mleko
  • Woda
  • Mleko

Spróbuj sam

Przykład 2

Skopiuj element "demo", w tym jego atrybuty i podelementy, i dodaj go do dokumentu:

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

Spróbuj sam

Gramatyka

node.cloneNode(deep)

Parametr

Parametr Opis
deep

Opcjonalnie.

  • false - domyślnie. Tylko klonuj węzeł i jego atrybuty
  • true - klonuj węzeł, jego atrybuty i potomków

Zwrócona wartość

Typ Opis
Obiekt Node Z克隆owanym węzłem.

Wsparcie przeglądarki

element.cloneNode() To jest cecha DOM Level 1 (1998).

Wszystkie przeglądarki wspierają to w pełni:

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