Klonování elementů v JavaScriptu

V této lekci se naučíme získávat kopie elementů. S těmito kopiemi lze pracovat jako s běžnými elementy - měnit je a vkládat na požadované místo stránky. Proces získávání kopií elementů se nazývá klonování.

Element lze naklonovat pomocí metody cloneNode. Do této metody je třeba předat parametr true nebo false. Pokud je předáno true, element se naklonuje úplně, včetně všech atributů a podřízených elementů, a pokud false - pouze samotný element.

Podívejme se na příklad. Předpokládejme, že máme takovýto kód:

<div id="parent">
	<div class="elem">
		<p>první odstavec</p>
		<p>druhý odstavec</p>
	</div>
</div>

Vytvoříme kopii bloku s třídou elem a vložíme ji na konec bloku #parent:

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

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

Výsledek bude následující:

<div id="parent">
	<div class="elem">
		<p>první odstavec</p>
		<p>druhý odstavec</p>
	</div>
	<div class="elem">
		<p>první odstavec</p>
		<p>druhý odstavec</p>
	</div>
</div>

Je zadán input. Je dáno tlačítko. Po kliknutí na tlačítko naklonujte tento input.