тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

Метод cloneNode

Метод cloneNode позволяет клонировать элемент и получить его точную копию. Эту копию затем можно вставить на страницу с помощью методов prepend, append, appendChild, insertBefore или insertAdjacentElement.

В параметре метод получает true либо false. Если передан true, то элемент клонируется полностью, вместе со всем атрибутами и дочерними элементами, а если false - только сам элемент (без дочерних элементов).

Синтаксис

элемент.cloneNode(true или false);

Пример

Сделаем копию блока с классом elem и вставим его в конец блока #parent:

<div id="parent"> <div class="elem"> <p>Первый абзац</p> <p>Второй абзац</p> </div> </div> let parent = document.getElementById('parent'); let elem = parent.querySelector('.elem'); let clone = elem.cloneNode(true); parent.appendChild(clone);

Результат выполнения кода:

<div id="parent"> <div class="elem"> <p>Первый абзац</p> <p>Второй абзац</p> </div> <div class="elem"> <p>Первый абзац</p> <p>Второй абзац</p> </div> </div>

Пример

С полученным клоном можно работать как с обычным элементом:

<div id="parent"> <div class="elem"> <p>Первый абзац</p> <p>Второй абзац</p> </div> </div> let parent = document.getElementById('parent'); let elem = parent.querySelector('.elem'); let clone = elem.cloneNode(true); clone.children[0].innerHTML = 'Новое содержимое первого абзаца'; clone.children[1].innerHTML = 'Новое содержимое второго абзаца'; parent.appendChild(clone);

Результат выполнения кода:

<div id="parent"> <div class="elem"> <p>Первый абзац</p> <p>Второй абзац</p> </div> <div class="elem"> <p>Новое содержимое первого абзаца</p> <p>Новое содержимое второго абзаца</p> </div> </div>

Смотрите также

  • метод createElement,
    с помощью которого можно создать новый элемент