Metoda cloneNode

Metoda cloneNode pozwala sklonować element i uzyskać jego dokładną kopię. Tę kopię można następnie wstawić na stronę za pomocą metod prepend, append, appendChild, insertBefore lub insertAdjacentElement.

W parametrze metoda otrzymuje true albo false. Jeśli przekazano true, element jest klonowany całkowicie, wraz ze wszystkimi atrybutami i elementami potomnymi, a jeśli false - tylko sam element (bez elementów potomnych).

Składnia

element.cloneNode(true lub false);

Przykład

Stwórzmy kopię bloku z klasą elem i wstawmy go na koniec bloku #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);

Wynik wykonania kodu:

<div id="parent">
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
</div>

Przykład

Z uzyskanym klonem można pracować jak ze zwykłym elementem:

<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 = 'nowy text1';
clone.children[1].textContent = 'nowy text2';

parent.appendChild(clone);

Wynik wykonania kodu:

<div id="parent">
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
	<div class="elem">
		<p>nowy text1</p>
		<p>nowy text2</p>
	</div>
</div>

Zobacz też

metoda createElement,
za pomocą której można utworzyć nowy element