Kloning av elementer i JavaScript

I denne leksjonen vil vi lære å få kopier av elementer. Disse kopiene kan arbeides med, som vanlige elementer - endre dem og sette inn på rett sted på siden. Prosessen for å få kopier av elementer kalles kloning.

Du kan klone et element ved hjelp av metoden cloneNode. Til denne metoden må du sende true eller false som parameter. Hvis true sendes, klones elementet fullstendig, sammen med alle attributter og underliggende elementer, og hvis false - kun selve elementet.

La oss se på et eksempel. La oss si at vi har følgende kode:

<div id="parent">
	<div class="elem">
		<p>første avsnitt</p>
		<p>andre avsnitt</p>
	</div>
</div>

La oss lage en kopi av blokken med klassen elem og sette den inn på slutten av blokken #parent:

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

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

Resultatet blir følgende:

<div id="parent">
	<div class="elem">
		<p>første avsnitt</p>
		<p>andre avsnitt</p>
	</div>
	<div class="elem">
		<p>første avsnitt</p>
		<p>andre avsnitt</p>
	</div>
</div>

Gitt et input-felt. Gitt en knapp. Ved klikk på knappen klon dette input-feltet.