Methode createElement

Die Methode createElement ermöglicht die Erstellung eines neuen Elements, indem der Tag-Name als Parameter übergeben wird. Nach der Erstellung kann mit dem Element gearbeitet werden wie mit einem normalen Element, und es kann auch der Seite mit den Methoden prepend, append, appendChild, insertBefore oder insertAdjacentElement hinzugefügt werden.

Wenn das Ergebnis von createElement in einer Variable gespeichert wird, dann befindet sich in dieser Variable ein solches Element, als ob wir es über querySelector oder getElementById erhalten hätten. Der einzige Unterschied - unser Element wird nicht auf der Seite platziert sein. Ansonsten können wir ihm innerHTML ändern, Attribute, Event-Handler hinzufügen und es schließlich auf der Seite platzieren.

Syntax

document.createElement('Tag-Name');

Beispiel

Lassen Sie uns einen Absatz erstellen, ihm Text setzen und am Ende des Blocks #parent auf der Seite platzieren:

<div id="parent">
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>

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

let p = document.createElement('p');
p.textContent = '!';

parent.appendChild(p);

Ergebnis der Codeausführung:

<div id="parent">
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<p>!</p>
</div>

Beispiel

Gegeben sei ein ul. Lassen Sie uns darin 9 li-Tags platzieren, wobei deren Text die Ordnungsnummern sein sollen:

<ul id="parent"></ul>

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

for (let i = 1; i <= 9; i++) {
	let li = document.createElement('li');
	li.textContent = i;
	parent.appendChild(li);
}

Ergebnis der Codeausführung:

<ul id="parent">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
</ul>

Beispiel

Lassen Sie uns beim Einfügen der Elemente Event-Handler an sie binden:

<ul id="parent"></ul>

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

for (let i = 1; i <= 9; i++) {
	let li = document.createElement('li');
	li.textContent = i;
	
	li.addEventListener('click', function() {
		alert(this.textContent);
	});
	
	parent.appendChild(li);
};

Siehe auch

Methode cloneNode,
mit der ein Element geklont werden kann
Methode createTextNode,
mit der ein neuer Textknoten erstellt werden kann