Elemente mit createElement() erzeugen

Oft ist man gezwungen, Elemente mit JavaScript zu erzeugen. In unserem Beispiel arbeite ich mit einem Eingabefeld, um zu veranschaulichen, wie das am besten funktioniert und worauf ihr achten müsst. Die Zahl im Textfeld gibt an, wie viele DIV-Elemente erstellt werden sollen. Mithilfe einer For-Schleife erzeugen wir die Elemente und fügen sie in das Ziel-Element (Target) ein.
Wichtig ist dabei, dass wir einen Ziel-Container - also unser Target - definiert haben.

Kopiert Euch gerne den Code und probiert es aus: Code

Beispiel

Target

Anzahl der Elemente festegen:
Testen

Code


HTML:

<div id="target">
	Target
</div>
Anzahl der Elemente festegen: 
<input id="countmyelements" type="text" name="countmyelements" 
value="5" class="array-ceckbox" maxlength="1">
<br>
<a class="center" href="javascript:createMyElement()">Testen</a>
</div>



CSS:




JavaScript:

function createMyElement() {
	
	// Sicherstellen, dass noch keine DIV's geschrieben wurden
	// Nur wenn kein DIV mit der ID "new_div_1" existiert 
	// darf die Funktion ausgeführt werden
	if( !document.querySelector('#div_1') ) {
		
		// Anzahl der Elemente ermitteln
		// Auslesen des Inputs id="countmyelements"
		let anzahl = document.querySelector('#countmyelements').value;

		// Target zuweisen
		let target = document.querySelector('#target'); // Target ermitteln
		
		for ( let i = 1; i <= anzahl; i++ ) { 
			
			// Neues DIV-Element erzeugen
			let newdiv = document.createElement('div'); 
			
			// ID zuweisen
			newdiv.setAttribute('id','div_'+i);
			
			// Class zuweisen
			newdiv.setAttribute('class','myNewDiv');
			
			// Neuen Knoten erzeugen - Kindelement von Target-Element
			target.appendChild(newdiv);
			
			// Inhalt zuweisen über append()
			newdiv.append("Hello! I am DIV # "+i);
		}
	}
}