Erstellung und Einfügen von Elementen in JavaScript

Jetzt lernen wir, wie man neue DOM-Elemente über JavaScript erstellt und sie dann der Seite hinzufügt. Dafür ist die Methode createElement vorgesehen. Als Parameter dieser Methode sollte der Name des Tags übergeben werden, der erstellt werden soll.

Wenn man das Ergebnis von createElement in eine Variable schreibt, dann wird in dieser Variable ein solches Element sein, als ob wir es über querySelector erhalten hätten.

Der einzige Unterschied - unser Element wird nicht auf der Seite platziert sein. Ansonsten können wir ihm Text ändern, Attribute, Event-Handler hinzufügen und es schließlich auf der Seite platzieren.

Um das neue Element auf der Seite zu platzieren, wird die Methode appendChild verwendet. Diese Methode sollte auf das Element angewendet werden, in das wir unser Element einfügen möchten. Und als Parameter der Methode sollte unser neues Element übergeben werden, das zuvor über createElement erstellt wurde.

Sehen wir uns ein praktisches Beispiel an. Angenommen wir haben ein Div, und darin - mehrere Absätze:

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

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

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

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

parent.appendChild(p);

Das Ergebnis der Codeausführung:

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

Gegeben ist ein ol:

<ol id="elem"></ol>

Fügen Sie am Ende ein li mit dem Text 'item' ein.

Gegeben ist ein ol und ein Button:

<ol id="elem"></ol>
<button id="button">click me</button>

Sorgen Sie dafür, dass beim Klick auf den Button am Ende der Liste ein li mit dem Text 'item' hinzugefügt wird.