Elementu klonēšana JavaScript

Šajā nodarbībā mēs iemācīsimies iegūt elementu kopijas. Ar šīm kopijām varēs strādāt kā ar parastiem elementiem - mainīt tos un ievietot vajadzīgajā vietā lapā. Process elementu kopiju iegūšanu sauc par klonēšanu.

Elementu var klonēt, izmantojot metodi cloneNode. Šai metodei kā parametrs jānodod true vai false. Ja nodots true, tad elements tiek pilnībā klonēts, kopā ar visiem atribūtiem un apakšelementiem, bet ja false - tikai pats elements.

Apskatīsim piemērā. Pieņemsim, ka mums ir šāds kods:

<div id="parent">
	<div class="elem">
		<p>pirmais rindkopa</p>
		<p>otrais rindkopa</p>
	</div>
</div>

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

let parent = document.querySelector('#parent');
let elem = parent.querySelector('.elem');

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

Rezultātā iegūsim sekojošo:

<div id="parent">
	<div class="elem">
		<p>pirmais rindkopa</p>
		<p>otrais rindkopa</p>
	</div>
	<div class="elem">
		<p>pirmais rindkopa</p>
		<p>otrais rindkopa</p>
	</div>
</div>

Dots ievades lauks. Dota poga. Nospiežot pogu klonējiet šo ievades lauku.