Metoden cloneNode

Metoden cloneNode giver mulighed for at klone et element og opnå en præcis kopi af det. Denne kopi kan derefter indsættes på siden med hjælp af metoderne prepend, append, appendChild, insertBefore eller insertAdjacentElement.

I parameteren modtager metoden true eller false. Hvis der sendes true, klones elementet fuldstændigt, sammen med alle attributter og underordnede elementer, og hvis false - kun selve elementet (uden underordnede elementer).

Syntaks

element.cloneNode(true eller false);

Eksempel

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

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

Resultatet af udførelsen af koden:

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

Eksempel

Man kan arbejde med den resulterende klon som med et almindeligt 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);

Resultatet af udførelsen af koden:

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

Se også

metoden createElement,
som kan bruges til at oprette et nyt element