Die cloneNode Metode

Die metode cloneNode laat jou toe om 'n element te kloon en sy presiese kopie te verkry. Hierdie kopie kan dan op die bladsy geplaas word met die behulp van die metodes prepend, append, appendChild, insertBefore of insertAdjacentElement.

In die parameter ontvang die metode true of false. As true oorgedra word, word die element volledig gekloon, saam met alle attribute en kindelemente, en as false - slegs die element self (sonder kindelemente).

Sintaksis

element.cloneNode(true of false);

Voorbeeld

Laat ons 'n kopie van die blok met klas elem maak en dit aan die einde van die blok #parent plaas:

<div id="parent">
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
</div>

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

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

Resultaat van die kode-uitvoering:

<div id="parent">
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
</div>

Voorbeeld

Met die verkrygde kloon kan jy werk soos met 'n gewone element:

<div id="parent">
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
</div>

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

let clone = elem.cloneNode(true);
clone.children[0].textContent = 'new text1';
clone.children[1].textContent = 'new text2';

parent.appendChild(clone);

Resultaat van die kode-uitvoering:

<div id="parent">
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
	<div class="elem">
		<p>new text1</p>
		<p>new text2</p>
	</div>
</div>

Sien ook

metode createElement,
waarmee jy 'n nuwe element kan skep