cloneNode()

Sollten wir ein Element kopieren, benötigen wir hierfür die Methode element.cloneNode().
Wollt Ihr das Element mit allen Kind-Elementen kopieren, setzt den Parameter auf "true".
element.cloneNode(true)
In unserem Fall möchten wir die Liste kopieren und in das DIV darunter einbinden.

Dabei ist eine Besonderheit zu beachten: Dazu kopiere ich das UL-Element mit der Klasse clone_element. <ul class="clone_element">
Mein Skript arbeitet mit document.querySelector('clone_element'). Auch wenn wir den Kopiervorgang wiederholen, ist sichergestellt, dass wir die richtige Liste kopieren.
Grund hierfür ist, dass unser querySelector('.clone_element') immer das erste Element mit der Klasse "clone_element" erfassen.
Alternativ könnte man auch wie folgt arbeiten: document.querySelectorAll('.clone_element')[0]
In diesem Fall stellen wir ebenfalls sicher, dass das erste Element mit der Klasse "clone_element" angesprochen wird.

Kopiert Euch gerne den Code und probiert es aus: Code

HTML:

<ul class="clone_element">
	<li>Milch</li>
	<li>Kaffee</li>
	<li>Kakao</li>
</ul>
<div id="ziel_element">
	Hier reinkopieren.
</div>



CSS:




JavaScript:

function element_clone(){
	
	// Das zu kopierende Element
	let ziel = document.querySelector('.clone_element');
	
	// Target wohin kopiert werden soll
	let copy_target = document.querySelector('#ziel_element');
	
	// Element kopieren, mit allen Kind-Elementen
	let kopie = ziel.cloneNode( true );
	
	// In Target einbinden über appendChild()
	copy_target.appendChild( kopie );
}