Klonovanie elementov v JavaScripte

V tejto lekcii sa naučíme, ako získať kópie elementov. S týmito kópiami možno pracovať ako s obyčajnými elementmi - meniť ich a vkladať na požadované miesto na stránke. Proces získavania kópií elementov sa nazýva klonovanie.

Element je možné klonovať pomocou metódy cloneNode. Táto metóda musí mať ako parameter zadané true alebo false. Ak je zadané true, element sa naklonuje úplne, spolu so všetkými atribútmi a podriadenými elementami, a ak false - iba samotný element.

Pozrime sa na príklad. Predpokladajme, že máme takýto kód:

<div id="parent">
	<div class="elem">
		<p>prvý odsek</p>
		<p>druhý odsek</p>
	</div>
</div>

Vytvorme kópiu bloku s triedou elem a vložme ho na koniec bloku #parent:

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

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

Výsledkom bude nasledovné:

<div id="parent">
	<div class="elem">
		<p>prvý odsek</p>
		<p>druhý odsek</p>
	</div>
	<div class="elem">
		<p>prvý odsek</p>
		<p>druhý odsek</p>
	</div>
</div>

Daný je input. Dané je tlačidlo. Kliknutím na tlačidlo naklonujte tento input.