Метод cloneNode() элемента DOM HTML

Определение и использование

Метод cloneNode() Метод создает копию узла и возвращает эту копию.

Метод cloneNode() Метод клонирует все атрибуты и их значения.

Если вы还想 клонировать потомков (потомков), установите параметр deep в true.

Вставка обратно

Чтобы вставить клонированный узел обратно в документ, используйте:

Метод appendChild()

Метод insertBefore()

См. также:

Метод adoptNode()

Метод importNode()

Метод createElement()

Метод createTextNode()

Пример

Пример 1

Скопируйте элемент <li> из "myList2" в "myList1":

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

До клонирования:

  • Кофе
  • Чай
  • Вода
  • Молоко

После клонирования:

  • Кофе
  • Чай
  • Молоко
  • Вода
  • Молоко

Попробуйте сами

Пример 2

Скопируйте элемент "demo", включая его атрибуты и подэлементы, и добавьте его в документ:

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

Попробуйте сами

Синтаксис

node.cloneNode(deep)

Параметр

Параметр Описание
deep

Опционально.

  • false - по умолчанию. Клонируется только узел и его атрибуты
  • true - клонируется узел, его атрибуты и потомки

Возвратное значение

Тип Описание
Объект Node Клонированный узел.

Поддержка браузерами

element.cloneNode() Это функция DOM Level 1 (1998).

Все браузеры полностью поддерживают его:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Поддержка 9-11 Поддержка Поддержка Поддержка Поддержка