Метад 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,
з дапамогай якога можна стварыць новы элемент