Метод cloneNode - клонирование элементов на JavaScript
Метод cloneNode позволяет клонировать
элемент и получить его точную копию. Эту
копию затем можно вставить на страницу с
помощью методов prepend,
append,
appendChild,
insertBefore
или insertAdjacentElement.
В параметре метод получает true либо false.
Если передан true, то элемент клонируется
полностью, вместе со всем атрибутами и дочерними
элементами, а если false - только сам элемент
(без дочерних элементов).
Синтаксис
элемент.cloneNode(true или false);
Пример
Сделаем копию блока с классом elem
и вставим его в конец блока #parent:
<div id="parent">
<div class="elem">
<p>text1</p>
<p>text2</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>text1</p>
<p>text2</p>
</div>
<div class="elem">
<p>text1</p>
<p>text2</p>
</div>
</div>
Пример
С полученным клоном можно работать как с обычным элементом:
<div id="parent">
<div class="elem">
<p>text1</p>
<p>text2</p>
</div>
</div>
let parent = document.getElementById('parent');
let elem = parent.querySelector('.elem');
let clone = elem.cloneNode(true);
clone.children[0].textContent = 'new text1';
clone.children[1].textContent = 'new text2';
parent.appendChild(clone);
Результат выполнения кода:
<div id="parent">
<div class="elem">
<p>text1</p>
<p>text2</p>
</div>
<div class="elem">
<p>new text1</p>
<p>new text2</p>
</div>
</div>
Смотрите также
-
метод
createElement,
с помощью которого можно создать новый элемент