Klonen von Elementen in JavaScript

In dieser Lektion lernen wir, Kopien von Elementen zu erhalten. Mit diesen Kopien kann gearbeitet werden, wie mit gewöhnlichen Elementen - sie zu ändern und an die gewünschte Stelle der Seite einzufügen. Der Prozess des Erhaltens von Elementkopien wird Klonen genannt.

Ein Element kann mit der Methode cloneNode geklont werden. Dieser Methode muss true oder false als Parameter übergeben werden. Wenn true übergeben wird, wird das Element vollständig geklont, zusammen mit allen Attributen und Kindelementen, und wenn false - nur das Element selbst.

Sehen wir uns ein Beispiel an. Nehmen wir an, wir haben folgenden Code:

<div id="parent">
	<div class="elem">
		<p>erster Absatz</p>
		<p>zweiter Absatz</p>
	</div>
</div>

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

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

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

Das Ergebnis wird folgendes sein:

<div id="parent">
	<div class="elem">
		<p>erster Absatz</p>
		<p>zweiter Absatz</p>
	</div>
	<div class="elem">
		<p>erster Absatz</p>
		<p>zweiter Absatz</p>
	</div>
</div>

Es gibt ein Input-Feld. Es gibt einen Button. Bei Klick auf den Button klonen Sie dieses Input-Feld.