Metoden cloneNode

Metoden cloneNode lar deg klone et element og få en eksakt kopi. Denne kopien kan deretter settes inn på siden med hjelp av metodene prepend, append, appendChild, insertBefore eller insertAdjacentElement.

I parameteren tar metoden true eller false. Hvis true sendes, klones elementet fullstendig, med alle attributter og underliggende elementer, og hvis false - kun selve elementet (uten underliggende elementer).

Syntaks

element.cloneNode(true eller false);

Eksempel

La oss lage en kopi av blokken med klassen elem og sette den inn på slutten av 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 av kodekjøringen:

<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 jobbe med den resulterende klonen som med et vanlig 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 av kodekjøringen:

<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 brukes til å opprette et nytt element