Klonering van Elemente in JavaScript

In hierdie les sal ons leer om kopieë van elemente te verkry. Met hierdie kopieë kan jy werk soos met gewone elemente - hulle verander en in die regte plek op die bladsy invoeg. Die proses om kopieë van elemente te verkry, word klonering genoem.

Jy kan 'n element kloon met die metode cloneNode. Aan hierdie metode moet jy true of false as parameter gee. As true gegee word, word die element volledig gekloneer, saam met alle sy eienskappe en kind-elemente, en as false - slegs die element self.

Kom ons kyk na 'n voorbeeld. Gestel ons het die volgende kode:

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

Kom ons maak 'n kopie van die blok met klas elem en voeg dit aan die einde van die blok #parent in:

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

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

Die resultaat sal die volgende wees:

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

Gegee 'n inset. Gegee 'n knoppie. Wanneer op die knoppie gedruk word, kloon hierdie inset.