Het klonen van elementen in JavaScript

In deze les leren we kopieën van elementen te maken. Met deze kopieën kunnen we werken, zoals met gewone elementen - ze wijzigen en op de gewenste plek op de pagina invoegen. Het proces van het maken van kopieën van elementen wordt klonen genoemd.

Je kunt een element klonen met de methode cloneNode. Aan deze methode moet je true of false als parameter doorgeven. Als true wordt doorgegeven, wordt het element volledig gekloond, samen met alle attributen en child-elementen, en als false - alleen het element zelf.

Laten we een voorbeeld bekijken. Stel we hebben de volgende code:

<div id="parent">
	<div class="elem">
		<p>eerste alinea</p>
		<p>tweede alinea</p>
	</div>
</div>

Laten we een kopie maken van het blok met de klasse elem en het aan het einde van het blok #parent invoegen:

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

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

Het resultaat wordt het volgende:

<div id="parent">
	<div class="elem">
		<p>eerste alinea</p>
		<p>tweede alinea</p>
	</div>
	<div class="elem">
		<p>eerste alinea</p>
		<p>tweede alinea</p>
	</div>
</div>

Gegeven een input. Gegeven een knop. Kloon deze input bij het klikken op de knop.