Elemek klónozása JavaScriptben

Ebben a leckében megtanuljuk, hogyan készíthetünk elemek másolatát. Ezekkel a másolatokkal ugyanúgy dolgozhatunk, mint a közönséges elemekkel - módosíthatjuk őket és beilleszthetjük az oldal kívánt helyére. Az elemek másolatainak elkészítését klónozásnak nevezzük.

Egy elemet a cloneNode metódussal lehet klónozni. Ennek a metódusnak true vagy false értéket kell átadni paraméterként. Ha true értéket adunk át, akkor az elemet teljesen, minden attribútumával és gyermek elemeivel együtt klónozza, ha false értéket - akkor csak magát az elemet.

Nézzük egy példán. Tegyük fel, hogy a following kódunk van:

<div id="parent">
	<div class="elem">
		<p>első bekezdés</p>
		<p>második bekezdés</p>
	</div>
</div>

Készítsünk egy másolatot a elem osztályú blokkról, és illesszük be a #parent blokk végére:

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

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

Az eredmény a következő lesz:

<div id="parent">
	<div class="elem">
		<p>első bekezdés</p>
		<p>második bekezdés</p>
	</div>
	<div class="elem">
		<p>első bekezdés</p>
		<p>második bekezdés</p>
	</div>
</div>

Adott egy input. Adott egy gomb. A gomb megnyomására klónozd ezt az inputot.