Zuletzt aktualisiert am 1. September 2021.
Oder: Mit JavaScript Elemente nachträglich im DOM einfügen.
Bestehende Elemente lassen sich über innerHTML manipulieren und ergänzen.
Was ist aber, wenn man ein ganz neues Element hinzufügen will?
Das ist vor allem dann interessant, wenn das DOM bereits “gebaut” ist, oder man nur an einer zentralen Stelle zusätzlichen Code einbauen kann.
Ein Beispiel sind z.B. Hooks in WordPress. Angenommen, es gibt für die entsprechende Seite einen Hook, über den man zusätzlichen Code z.B. aus einer zentralen Datei wie der functions.php oder bei BuddyPress der bp-custom.php ausführen kann.
Das geschieht jedoch immer an der Stelle, an der auch die zum Hook gehörige Action ausgeführt wird. Im Zweifel also am Anfang oder Ende der Seite:
Was ist nun aber, wenn wir “Hallo Welt!” (oder ein beliebiges anderes Element) nun an einer bestimmten Position auf der Webseite ausgeben wollen?
Das Problem lässt sich mit JavaScript einfach lösen, da JavaScript clientseitig ausgeführt wird und damit auch nach der initialen Erstellung das DOM manipulieren kann.
TL;DR: Was ist nochmal das DOM?
Beim Document Object Model (DOM) handelt es sich um eine Schnittstelle zwischen HTML-/XML-Dokumenten und JavaScript.
Der Dokument weird hierbei in einer Baumstruktur dargestellt, in der jeder Knoten ein Objekt des Gesamtdokuments darstellt. Beispielsweise ein Paragraph, ein Bild oder eine Überschrift.
Die Gesamtheit aller Knoten repräsentiert das gesamte Dokument.
Wir erstellen also ein neues Objekt, dass wir in das DOM einfügen und an ein bestehendes Objekt anhängen. So können wir die Position des einfügens bestimmen.
Gesamtzeit: 5 Minuten
1) In JavaScript ein Objekt erstellen
Da wir im DOM mit Objekten arbeiten, und so also auch ein Objekt an ein anderes anhängen werden, müssen wir zunächst ein Objekt mit dem neuen Inhalt erstellen.
Nehmen wir zum Beispiel eine Bildunterschrift, die wir ergänzen möchten (in Form eines Paragraphs).
var neuesObjekt = document.createElement("p");
2) Neues Objekt mit Inhalt füllen
Wir haben nun das neue Objekt vom Typ eines Paragraphs erstellt, es ist aber noch komplett leer. Es muss also noch mit dem einzufügenden Inhalt und möglicherweise anderen Eigenschaften bestückt werden:
neuesObjekt.innerHTML = “Bildunterschrift: Hallo Welt!”; neuesObjekt.style.backgroundColor = “#90EE90”;
Das Objekt hat nun den Inhalt bekommen und zudem eine Style-Eigenschaft, nämlich die Hintergrundfarbe grün (HEX: #90EE90).
3) Neues Objekt in den DOM einfügen
Grundsätzlich gibt es zwei Möglichkeiten, das neue Element einzufügen: Entweder VOR einem bestehenden Element, oder aber NACH einem bestehenden Element.
Zuerst müssen wir jedoch das Element festlegen, welches als Bezugspunkt gelten soll, also an welches das neue Element z.B. angehangen wird:
Im Optimalfall hat das jeweilige Element eine ID und kann wie folgt angesprochen werden:
var BezugsObjekt = document.getElementById("bild1");
Wenn wir nun unser neues Element anhängen wollen, machen wir das mit:BezugsObjekt.appendChild(neuesObjekt);
Wenn wir das neue Element DAVOR einfügen möchten, geht das wie folgt:BezugsObjekt.insertBefore(neuesObjekt);
4) Fertig + Überprüfung
Fertig, nun einfach die Webseite einmal reloaden und schauen, ob das neue Element an seinem Platz ist.
Schreibe eine Antwort