Text- und HTML-Inhalte ändern
Aktualisieren Sie Inhalte mit textContent und innerHTML.
Text- und HTML-Inhalte ändern ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.
Text lesen und schreiben
Um die Anzeige eines Elements zu ändern, können Sie seinen Text oder sein HTML festlegen. Die richtige Wahl hängt davon ab, ob Sie Markup benötigen und wie sehr Sie den Daten vertrauen.
textContent
textContent liest den reinen Text eines Elements aus oder legt ihn fest. Beim Setzen werden alle untergeordneten Elemente durch einen einzelnen Textknoten ersetzt und die Eingabe als reiner Text behandelt.
const el = document.querySelector("#status");
el.textContent = "Saved!";textContent maskiert Markup
Da es sich um reinen Text handelt, wird HTML im String wörtlich angezeigt und nicht geparst. Dadurch ist die Verwendung sicher vor Injections.
el.textContent = "<b>hi</b>";
// displays the literal characters <b>hi</b>innerHTML
innerHTML liest das HTML-Markup innerhalb eines Elements aus oder legt es fest. Beim Setzen wird der String als HTML geparst und es werden echte Knoten erstellt.
const box = document.querySelector("#box");
box.innerHTML = "<strong>Done</strong>";innerHTML ersetzt alles
Durch eine Zuweisung an innerHTML werden vorhandene untergeordnete Elemente verworfen und der Teilbaum aus dem neuen Markup neu aufgebaut.
box.innerHTML = "<ul><li>One</li><li>Two</li></ul>";Die XSS-Gefahr
Fügen Sie niemals nicht vertrauenswürdige Benutzereingaben in innerHTML ein. Ein schädlicher String kann Skripte oder Event-Handler einschleusen – eine als XSS bezeichnete Sicherheitslücke.
const userInput = getInput();
// DANGEROUS:
// box.innerHTML = userInput;
// SAFE:
box.textContent = userInput;innerText
innerText ähnelt textContent, berücksichtigt aber die Formatierung: Die Eigenschaft gibt den gerenderten Text wieder und ignoriert ausgeblendete Elemente.
console.log(el.innerText); // visible text onlytextContent im Vergleich zu innerText
textContent gibt den gesamten Text einschließlich ausgeblendeter Inhalte zurück und ist schneller, da kein Layout berechnet wird. innerText berücksichtigt das Layout und ist langsamer.
el.textContent; // all text, even display:none
el.innerText; // only what is visually renderedText sicher anhängen
Um Text hinzuzufügen, ohne vorhandene Knoten zu löschen, erstellen Sie einen Textknoten oder verwenden Sie insertAdjacentText, anstatt textContent zu überschreiben.
el.append(document.createTextNode(" extra"));
el.insertAdjacentText("beforeend", " more");HTML ohne erneutes Parsen einfügen
insertAdjacentHTML fügt Markup an einer bestimmten Position ein, ohne das gesamte Element erneut zu parsen. Das ist effizienter, als innerHTML neu aufzubauen.
box.insertAdjacentHTML("beforeend", "<li>New item</li>");Die richtige Eigenschaft auswählen
Verwenden Sie textContent für reinen Text (die sichere Standardwahl), innerHTML nur mit vertrauenswürdigem Markup und innerText, wenn Sie ausdrücklich gerenderten, sichtbaren Text benötigen.
Kurze Überprüfung
Wählen Sie den sicheren Ansatz.
Zusammenfassung
textContent setzt reinen, maskierten Text und ist die sichere Standardwahl. innerHTML parst Markup, birgt bei nicht vertrauenswürdigen Eingaben aber ein XSS-Risiko. innerText gibt nur sichtbaren, gerenderten Text wieder. Zum Hinzufügen von Inhalten sollten Sie insertAdjacentHTML/insertAdjacentText bevorzugen, anstatt das gesamte Element zu überschreiben.
Lerne JavaScript mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 59
- Lektionen
- 200
Häufig gestellte Fragen
Ist die Lektion „Text- und HTML-Inhalte ändern“ kostenlos?
Ja — der vollständige Text von „Text- und HTML-Inhalte ändern“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Text- und HTML-Inhalte ändern“?
Aktualisieren Sie Inhalte mit textContent und innerHTML. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um JavaScript Academy zu starten?
Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Text- und HTML-Inhalte ändern“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?
Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Text- und HTML-Inhalte ändern
- Elemente erstellen und einfügen
- Attribute und Klassen ändern
- Knoten entfernen und ersetzen