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.

HTML Code

1<p class="alt">Alter Text wird ersetzt</p>

replaceWith()

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

Output

Neuer Text

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

Ersetzt
Item 2
Item 3

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

Aktualisierter Titel

Praktische Beispiele

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

HTML Code

1<div class="status">Warte auf Server....</div>

Status ersetzen

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

Output

<p class="fertig">Erledigt</p>

CSS Code

1#aktualisieren {
2    border: none;
3    border-radius: 8px;
4    padding: 0.5rem 1rem;
5    background-color: #1e6bd9;
6    color: #fff;
7    cursor: pointer;
8    font: inherit;
9}

Text per Klick aktualisieren

1<p class="nachricht">Dieser Text wird ersetzt</p>
2<button id="aktualisieren">Text aktualliesieren</button>

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

Dieser Text wird ersetzt

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