Метод cloneNode позволяет клонировать элемент и получить его точную копию. Эту копию затем можно вставить на страницу с помощью appendChild или других подобных методов.

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

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

Синтаксис

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

Примеры

Пример

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

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

var clone = elem.cloneNode(true);
parent.appendChild(clone);

HTML код элемента станет выглядеть так:

<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>
var parent = document.getElementById('parent');
var elem = parent.querySelector('.elem');

var clone = elem.cloneNode(true);
clone.children[0].innerHTML = 'Новое содержимое первого абзаца';
clone.children[1].innerHTML = 'Новое содержимое второго абзаца';

parent.appendChild(clone);

HTML код элемента станет выглядеть так:

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

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