Метод cloneNode

Методът 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,
с който можете да създадете нов елемент