Methode cloneNode

Die Methode cloneNode ermöglicht es, ein Element zu klonen und eine exakte Kopie davon zu erhalten. Diese Kopie kann dann mit den Methoden prepend, append, appendChild, insertBefore oder insertAdjacentElement in die Seite eingefügt werden.

Als Parameter erhält die Methode true oder false. Wenn true übergeben wird, wird das Element vollständig geklont, mit allen Attributen und Kindelementen. Wenn false übergeben wird, wird nur das Element selbst (ohne Kindelemente) geklont.

Syntax

element.cloneNode(true oder false);

Beispiel

Erstellen wir eine Kopie des Blocks mit der Klasse elem und fügen sie ihn am Ende des Blocks #parent ein:

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

Ergebnis der Codeausführung:

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

Beispiel

Mit dem erhaltenen Klon kann wie mit einem normalen Element gearbeitet werden:

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

Ergebnis der Codeausführung:

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

Siehe auch

Methode createElement,
mit der ein neues Element erstellt werden kann