Elementtien kloonaus JavaScriptillä

Tässä oppitunnissa opimme saamaan kopioita elementeistä. Näillä kopioilla voidaan työskennellä kuin tavallisilla elementeillä - muuttaa niitä ja asettaa ne sivun haluttuun paikkaan. Prosessia elementtien kopioiden saamiseksi kutsutaan kloonaukseksi.

Elementtiä voidaan kloonata käyttämällä metodia cloneNode. Tähän metodiin tulee välittää parametrina true tai false. Jos välitetään true, elementti kloonataan kokonaan, kaikkine attribuutteineen ja lapsi-elementteineen, ja jos false - vain itse elementti.

Katsotaanpa esimerkkiä. Oletetaan, että meillä on seuraava koodi:

<div id="parent">
	<div class="elem">
		<p>ensimmäinen kappale</p>
		<p>toinen kappale</p>
	</div>
</div>

Tehdään kopio lohkosta, jolla on luokka elem ja lisätään se lohkon #parent loppuun:

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

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

Tuloksena saadaan seuraava:

<div id="parent">
	<div class="elem">
		<p>ensimmäinen kappale</p>
		<p>toinen kappale</p>
	</div>
	<div class="elem">
		<p>ensimmäinen kappale</p>
		<p>toinen kappale</p>
	</div>
</div>

Annettu syötekenttä. Annettu painike. Painiketta napsautettaessa kloonaa tämä syötekenttä.