Klonimi i elementeve në JavaScript

Në këtë mësim do të mësohemi si të marrim kopje të elementeve. Me këto kopje mund të punohet, sikur me elemente të zakonshëm - t'i ndryshoni dhe t'i vendosni në vendin e duhur të faqes. Procesi i marrjes së kopjeve të elementeve quhet klonim.

Një element mund të klonohet duke përdorur metodën cloneNode. Në këtë metodë duhet të kalohet si parametër true ose false. Nëse kalohet true, atëherë elementi klonohet plotësisht, së bashku me të gjithë atributet dhe elementet fëmijë, ndërsa nëse false - vetëm elementi në vetvete.

Le ta shohim me një shembull. Le të themi se kemi kodin e mëposhtëm:

<div id="parent">
	<div class="elem">
		<p>paragrafi i parë</p>
		<p>paragrafi i dytë</p>
	</div>
</div>

Le të bëjmë një kopje të bllokut me klasën elem dhe ta vendosim atë në fund të bllokut #parent:

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

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

Si rezultat do të fitohet e mëposhtja:

<div id="parent">
	<div class="elem">
		<p>paragrafi i parë</p>
		<p>paragrafi i dytë</p>
	</div>
	<div class="elem">
		<p>paragrafi i parë</p>
		<p>paragrafi i dytë</p>
	</div>
</div>

Jepet një input. Jepet një buton. Me klikim në buton klononi këtë input.