Kloning af elementer i JavaScript

I denne lektion lærer vi at få kopier af elementer. Disse kopier kan arbejdes med, som almindelige elementer - ændre dem og indsætte dem på det rigtige sted på siden. Processen for at få kopier af elementer kaldes kloning.

Du kan klone et element ved hjælp af metoden cloneNode. Denne metode skal have true eller false som parameter. Hvis der sendes true, klones elementet fuldstændigt, sammen med alle attributter og underliggende elementer, og hvis false - kun selve elementet.

Lad os se på et eksempel. Antag, at vi har følgende kode:

<div id="parent">
	<div class="elem">
		<p>første afsnit</p>
		<p>andet afsnit</p>
	</div>
</div>

Lad os lave en kopi af blokken med klassen elem og indsætte den i slutningen af blokken #parent:

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

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

Resultatet bliver følgende:

<div id="parent">
	<div class="elem">
		<p>første afsnit</p>
		<p>andet afsnit</p>
	</div>
	<div class="elem">
		<p>første afsnit</p>
		<p>andet afsnit</p>
	</div>
</div>

Der gives et inputfelt. Der gives en knap. Ved klik på knappen klon dette inputfelt.