Elemente im DOM ersetzen

Manchmal reicht es nicht, Inhalte zu ändern – du willst ein Element komplett durch ein anderes ersetzen. Dafür gibt es replaceWith() und replaceChild().

replaceWith()

Mit replaceWith() ersetzt du ein Element durch ein oder mehrere neue Knoten. Du rufst die Methode am alten Element selbst auf.

replaceWith()

1const alt = document.querySelector(".alt");
2const neu = document.createElement("p");
3neu.textContent = "Neuer Text";
4
5alt.replaceWith(neu);

Output

Das Element mit der Klasse alt wird durch den Absatz Neuer Text ersetzt.

replaceChild()

replaceChild() ist die ältere Variante: Du rufst sie am Elternelement auf und übergibst zuerst das neue, dann das alte Kind.

replaceChild()

1const liste = document.querySelector("ul");
2const alt = liste.firstElementChild;
3const neu = document.createElement("li");
4neu.textContent = "Ersetzt";
5
6liste.replaceChild(neu, alt);

Output

Der erste Listenpunkt wird durch Ersetzt ausgetauscht. Modern oft einfacher: alt.replaceWith(neu).

Inhalte aktualisieren

Nicht immer brauchst du ein neues Element. Oft reicht es, den Inhalt oder Attribute des bestehenden Elements zu aktualisieren – dann bleibt die Position im DOM gleich.

Inhalt aktualisieren

1const titel = document.querySelector("h1");
2
3// Inhalt aktualisieren – Element bleibt dasselbe
4titel.textContent = "Aktualisierter Titel";
5
6// oder mit HTML
7titel.innerHTML = "<em>Aktualisierter Titel</em>";

Output

Die Überschrift zeigt jetzt Aktualisierter Titel – dasselbe h1-Element, neuer Inhalt.

Praktische Beispiele

Typisch: einen Status austauschen oder nach einem Klick den Text aktualisieren.

Status ersetzen

1const status = document.querySelector(".status");
2const fertig = document.createElement("p");
3fertig.className = "status fertig";
4fertig.textContent = "Erledigt";
5
6status.replaceWith(fertig);

Output

Der alte Status-Absatz wird durch Erledigt ersetzt (inkl. neuer Klasse).

Text per Klick aktualisieren

1const button = document.querySelector("#aktualisieren");
2
3button.addEventListener("click", function() {
4    const nachricht = document.querySelector(".nachricht");
5    nachricht.textContent = "Daten wurden aktualisiert.";
6});

Output

Nach dem Klick steht in der Nachricht: Daten wurden aktualisiert.

Im nächsten Kapitel lernst du: Inhalte Dynamisch ändern