Deep Thought

DOM Manipulation

5 min read

DOM Manipulation

Erzeugen, einfügen, entfernen

Nach dieser Einheit kannst du …

  • erklären, wie ein neues Element erzeugt, gefüllt und in den Baum eingehängt wird,
  • die passende Einfügemethode für die gewünschte Position auswählen,
  • aus einem Array von Objekten eine Liste von DOM-Elementen erzeugen,
  • Elemente entfernen und ersetzen,
  • abwägen, wann createElement und wann innerHTML mit Template-Literal sinnvoll ist.

1 · Rückblick und Leitfrage

Voraussetzung: Du weißt bereits wie man Vorhandenes verändert: Elemente finden, Texte, Klassen und Attribute ändern.

Leitfrage: Woher kommen die Karten einer Galerie oder die Zeilen in der Liste, wenn sie gar nicht im HTML stehen?

Antwort: JavaScript erzeugt sie und hängt sie in den Baum.

2 · Erzeugen, füllen, einhängen

const karte = document.createElement("article");
karte.classList.add("karte");
karte.textContent = "Mein erstes Projekt";
document.querySelector("#galerie").append(karte);
SchrittWas passiertAuf der Seite sichtbar?
1. erzeugencreateElement liefert ein loses Element im Speicher❌
2. füllenKlassen, Text, Attribute werden gesetzt❌
3. einhängenDas Element bekommt einen Elternknoten✅

Warum ist ein erzeugtes Element unsichtbar?

Der Browser zeichnet nur, was im DOM-Baum der Seite hängt. Ein frisch erzeugtes Element ist ein Objekt ohne Eltern: karte.parentNode ist null. Für den Browser gehört es nicht zur Seite.

Im Browser nachvollziehen Führe die vier Zeilen einzeln in der Konsole aus und beobachte das Elements-Panel. Erst nach der letzten Zeile taucht das <article> dort auf.

3 · Einfügemethoden im Vergleich

MethodeDas neue Element landet …
ziel.prepend(el)als erstes Kind in ziel
ziel.append(el)als letztes Kind in ziel
ziel.before(el)vor ziel, auf derselben Ebene
ziel.after(el)nach ziel, auf derselben Ebene
ziel.appendChild(el)als letztes Kind (ältere Methode, nur ein Knoten)

Merkhilfe: prepend/append gehen hinein, before/after bleiben daneben.

append oder appendChild?

Beide hängen am Ende an. append ist neuer und flexibler: Es nimmt mehrere Argumente und auch reinen Text.

absatz.append("Gold für ", strong, "!");   // ✅
absatz.appendChild("Text");               // ❌ TypeError

Achtung: Einhängen verschiebt

Hängt ein Element schon im Baum und wird erneut eingehängt, wandert es an die neue Position. Es entsteht keine Kopie. Wer eine Kopie braucht, verwendet cloneNode(true).

4 · Entfernen und Ersetzen

karte.remove();                  // Element verschwindet aus dem Baum
alt.replaceWith(neu);            // alt wird durch neu ersetzt
galerie.replaceChildren();       // Container wird geleert

replaceChildren() ohne Argumente leert einen Container. Das ist wichtig, wenn eine Liste neu gezeichnet werden soll, sonst stehen die Einträge doppelt da.

5 · Walkthrough: Aus Daten wird eine Galerie

Gegeben ist ein Array mit drei Projekten:

const projekte = [
  { titel: "Wetterstation", klasse: "3AHIT" },
  { titel: "Schulchat",     klasse: "4CHIT" },
  { titel: "Robo-Arm",      klasse: "5AHIT" }
];

Für jedes Objekt entsteht eine Karte:

const galerie = document.querySelector("#galerie");
galerie.replaceChildren();
 
for (const projekt of projekte) {
  const karte = document.createElement("article");
  karte.classList.add("karte");
 
  const h3 = document.createElement("h3");
  h3.textContent = projekt.titel;
 
  const p = document.createElement("p");
  p.textContent = projekt.klasse;
 
  karte.append(h3, p);
  galerie.append(karte);
}

Zeile für Zeile:

  1. Container suchen und leeren.
  2. Für jedes Projekt eine neue Karte erzeugen, innerhalb der Schleife, damit jedes Mal ein eigenes Element entsteht.
  3. Überschrift und Text erzeugen und mit textContent füllen.
  4. Beide in die Karte hängen, dann die Karte in die Galerie.

Drei Objekte im Array ergeben drei Karten auf der Seite. Kommt ein viertes Projekt dazu, genügt es, das Array zu ergänzen und den Code erneut auszuführen.

Darstellung ist eine Funktion der Daten Wir ändern nicht die Seite von Hand, sondern die Daten, und zeichnen danach neu. Dieses Prinzip steckt in fast jeder modernen Weboberfläche.

6 · Die zweite Bauweise: Template-Literal

Dieselbe Galerie, kürzer geschrieben:

galerie.innerHTML = "";
for (const projekt of projekte) {
  galerie.innerHTML += `
    <article class="karte">
      <h3>${projekt.titel}</h3>
      <p>${projekt.klasse}</p>
    </article>`;
}

Was ist besser?

createElementTemplate-Literal
Lesbarkeitlängerkurz, sieht aus wie HTML
Sicherheit bei fremden Daten✅ textContent gibt Text immer als Text aus⚠️ HTML im Text wird interpretiert
Zugriff auf das Elementsofort als Variable vorhandenmuss danach gesucht werden

Die Template-Literal-Variante ist verbreitet und völlig in Ordnung, solange die Daten von dir selbst stammen. Problematisch wird sie, wenn Daten von außen kommen, z. B. aus einem Formular oder von einem Server. Steht dort etwa <img src="x" onerror="…">, führt der Browser den Code aus (vgl. innerHTML vs. textContent in UE 3).

7 · Ausblick: Performance

Jede Änderung am sichtbaren Baum kann den Browser zwingen, das Layout neu zu berechnen. Viele Einzeländerungen sind daher teurer als eine gesammelte. Ein Werkzeug dafür ist das DocumentFragment: Elemente werden zuerst darin gesammelt und dann mit einem einzigen append eingehängt:

const fragment = document.createDocumentFragment();
for (const projekt of projekte) {
  const karte = document.createElement("article");
  karte.textContent = projekt.titel;
  fragment.append(karte);     // noch unsichtbar
}
galerie.append(fragment);     // ein einziges Einhängen

Danach ist das Fragment leer, denn seine Kinder sind in die Galerie gewandert.

Zusammenfassung

  • Erzeugen → füllen → einhängen. Ohne Einhängen ist nichts zu sehen.
  • prepend/append = in das Ziel, before/after = neben das Ziel.
  • Ein Element kann nur an einer Stelle hängen: Einhängen verschiebt.
  • remove() entfernt, replaceWith() ersetzt, replaceChildren() leert.
  • Listen entstehen aus Arrays: Daten ändern, dann neu zeichnen.
  • Template-Literal ist kurz und gut, aber nie mit fremden Daten.

Selbstcheck ✅

  1. Du führst const li = document.createElement("li"); aus. Warum siehst du nichts?
  2. Ein Hinweis soll direkt unter einer Tabelle stehen, nicht in ihr. Welche Methode wählst du?
  3. Du erzeugst einen Link vor einer Schleife und hängst ihn in der Schleife an drei Sections an. Wie viele Links siehst du am Ende, und warum?
  4. Eine Render-Funktion wird zweimal aufgerufen und alle Einträge stehen doppelt da. Was fehlt?
  5. Ein Gästebuch zeigt Einträge von Besucher:innen an. Welche Bauweise verwendest du?
Lösungen
  1. Das Element ist noch nicht eingehängt und hat keinen Elternknoten.
  2. tabelle.after(hinweis)
  3. Einen, in der letzten Section. Es gibt nur ein Element, und jedes Einhängen verschiebt es.
  4. Der Container wird vorher nicht geleert: container.replaceChildren().
  5. createElement mit textContent, weil die Daten von außen kommen.

Graph View

Backlinks