Inhalte dynamisch ändern

Oft bleibt das Element im DOM und du änderst nur seinen Inhalt – z. B. nach einem Klick, einer Eingabe oder einer API-Antwort. Dafür nutzt du vor allem textContent, innerHTML und innerText.

textContent

Mit textContent setzt oder liest du den reinen Text eines Elements. HTML-Tags werden nicht ausgeführt, sondern als Text angezeigt. Das ist die sichere Standardwahl für normale Texte.

1const titel = document.querySelector("h1");
2
3titel.textContent = "Willkommen zurück!";

innerHTML

innerHTML setzt den Inhalt als HTML. Der Browser parst den String und erzeugt daraus echte Elemente – z. B. <strong> oder <a>.

Vorsicht: Inhalte aus Nutzereingaben oder unbekannten Quellen können XSS-Risiken erzeugen. Für reinen Text besser textContent verwenden.

1const box = document.querySelector("#box");
2
3box.innerHTML = "<strong>Wichtig:</strong> Speichere deine Änderungen.";

innerText

innerText arbeitet mit dem sichtbaren Text: Es berücksichtigt CSS (z. B. display: none) und Zeilenumbrüche ähnlich wie auf dem Bildschirm. Beim Setzen verhält es sich oft wie Text ohne HTML – für die meisten Fälle reicht aber textContent.

1const hinweis = document.querySelector(".hinweis");
2
3hinweis.innerText = "Nur sichtbarer Text wird gesetzt.";

Einsatzgebiete

Kurz die Faustregel: Wann welche Eigenschaft?

• textContent – Standard für Textänderungen (sicher und schnell)
• innerHTML – wenn du bewusst HTML-Struktur einfügen willst
• innerText – wenn der sichtbare Text inkl. Layout-Effekten relevant ist (seltener nötig)

1const el = document.querySelector("#info");
2
3// Sicher: nur Text, kein HTML
4el.textContent = "Hallo <em>Welt</em>";
5// Ergebnis auf der Seite: Hallo <em>Welt</em> (als Text)
6
7// Mit HTML: Tags werden interpretiert
8el.innerHTML = "Hallo <em>Welt</em>";
9// Ergebnis: Hallo Welt (Welt kursiv)