Elementų klonavimas JavaScript

Šioje pamokoje išmoksime gauti elementų kopijas. Su šiomis kopijomis galima bus dirbti kaip su paprastais elementais – keisti juos ir įterpti į reikiamą puslapio vietą. Procesas gaunant elementų kopijas vadinamas klonavimu.

Elementą galima klonuoti naudojant metodą cloneNode. Šiam metodui reikia perduoti parametrą true arba false. Jei perduodamas true, tuomet elementas klonuojamas visiškai, kartu su visais atributais ir dukteriniais elementais, o jei false – tik pats elementas.

Pažiūrėkime pavyzdžiu. Tarkime, kad turime šį kodą:

<div id="parent">
	<div class="elem">
		<p>pirmoji pastraipa</p>
		<p>antroji pastraipa</p>
	</div>
</div>

Padarykime bloko su klase elem kopiją ir įterpkime ją į bloko #parent pabaigą:

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

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

Dėl to bus gauta taip:

<div id="parent">
	<div class="elem">
		<p>pirmoji pastraipa</p>
		<p>antroji pastraipa</p>
	</div>
	<div class="elem">
		<p>pirmoji pastraipa</p>
		<p>antroji pastraipa</p>
	</div>
</div>

Duotas input'as. Duotas mygtukas. Paspaudus mygtuką klonuokite šį input'ą.