Metode cloneNode

Metode cloneNode ļauj klonēt elementu un iegūt tā precīzu kopiju. Šo kopiju pēc tam var ievietot lapā, izmantojot metodes prepend, append, appendChild, insertBefore vai insertAdjacentElement.

Parametrā metode saņem true vai false. Ja padod true, tad elements tiek klonēts pilnībā, kopā ar visiem atribūtiem un pakārtotajiem elementiem, bet ja false - tikai pats elements (bez pakārtotajiem elementiem).

Sintakse

element.cloneNode(true vai false);

Piemērs

Izveidosim bloka ar klasi elem kopiju un ievietosim to bloka #parent beigās:

<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);

Koda izpildes rezultāts:

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

Piemērs

Ar iegūto klonu var strādāt kā ar parastu elementu:

<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);

Koda izpildes rezultāts:

<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>

Skatiet arī

metode createElement,
ar kuras palīdzību var izveidot jaunu elementu