Methode cloneNode

De methode cloneNode maakt het mogelijk om een element te klonen en een exacte kopie te krijgen. Deze kopie kan vervolgens op de pagina worden geplaatst met behulp van de methoden prepend, append, appendChild, insertBefore of insertAdjacentElement.

Als parameter ontvangt de methode true of false. Als true wordt doorgegeven, wordt het element volledig gekloond, met alle attributen en onderliggende elementen, en als false - alleen het element zelf (zonder onderliggende elementen).

Syntaxis

element.cloneNode(true of false);

Voorbeeld

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

<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 de uitgevoerde code:

<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 de verkregen kloon kan worden gewerkt als met een gewoon 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 de uitgevoerde code:

<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>

Zie ook

methode createElement,
waarmee je een nieuw element kunt maken