0Pricing
Frontend Academy · Lektion

Inhalte ändern: textContent, innerHTML, classList

Lesen und aktualisieren Sie den Textinhalt von Elementen, fügen Sie HTML ein und schalten Sie CSS-Klassen programmgesteuert um, fügen Sie sie hinzu oder entfernen Sie sie.

Inhalte ändern: textContent, innerHTML, classList ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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 Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

textContent lesen und schreiben

element.textContent liest den reinen Textinhalt eines Elements einschließlich aller untergeordneten Elemente oder legt ihn fest. Das ist sicher – HTML wird niemals geparst. Wenn Sie den Wert mit Benutzereingaben setzen, entstehen daher keine XSS-Sicherheitslücken.

const heading = document.querySelector('h1');
console.log(heading.textContent); // read
heading.textContent = 'New Title'; // write — replaces all children

// Safe with user input:
element.textContent = userInput; // no XSS risk

innerHTML – mit Vorsicht verwenden

element.innerHTML liest das HTML-Markup innerhalb eines Elements oder legt es fest. Das ist praktisch, aber bei Benutzereingaben gefährlich – HTML wird geparst und kann Skripte ausführen (XSS). Setzen Sie innerHTML niemals mit nicht bereinigten Benutzerdaten.

card.innerHTML = '<strong>Loading...</strong>'; // safe: hardcoded string

// DANGER — never do this:
element.innerHTML = userInput; // XSS vulnerability

// Safe alternative:
const div = document.createElement('div');
div.textContent = userInput;   // won't parse as HTML

innerText im Vergleich zu textContent

innerText gibt nur sichtbaren Text zurück (berücksichtigt CSS display:none) und löst ein Layout aus. textContent gibt den gesamten Text einschließlich ausgeblendeter Inhalte zurück und ist schneller. Bevorzugen Sie textContent, sofern Sie nicht ausdrücklich das Verhalten für sichtbaren Text benötigen.

classList – Klassen hinzufügen und entfernen

element.classList stellt Methoden bereit, um CSS-Klassen zu ändern, ohne die gesamte className-Zeichenfolge anzufassen. add(), remove(), toggle(), contains(), replace().

const btn = document.querySelector('.btn');
btn.classList.add('active');         // add a class
btn.classList.remove('disabled');    // remove a class
btn.classList.toggle('open');        // add if absent, remove if present
console.log(btn.classList.contains('active')); // true

toggle mit Force-Parameter

classList.toggle('class', condition) fügt die Klasse hinzu, wenn condition truthy ist, und entfernt sie, wenn condition falsy ist. So lässt sich eine Klasse übersichtlich mit einem booleschen Zustand synchronisieren.

const isDark = true;
document.body.classList.toggle('dark-mode', isDark);
// No more: if/else with add/remove

Attribute lesen und festlegen

element.getAttribute('attr') liest ein beliebiges Attribut. element.setAttribute('attr', value) legt es fest. element.removeAttribute('attr') entfernt es. element.hasAttribute('attr') prüft, ob es vorhanden ist.

const img = document.querySelector('img');
console.log(img.getAttribute('alt'));
img.setAttribute('alt', 'New description');
img.removeAttribute('loading');

data-*-Attribute

Benutzerdefinierte data-*-Attribute speichern zusätzliche Daten in Elementen, ohne das DOM zu beeinflussen. Greifen Sie über element.dataset in camelCase darauf zu.

<div id="card" data-user-id="42" data-role="admin"></div>

const card = document.querySelector('#card');
console.log(card.dataset.userId); // '42'
console.log(card.dataset.role);   // 'admin'
card.dataset.status = 'active';   // sets data-status

Style-Eigenschaft

element.style.propertyName legt Inline-Styles fest. Verwenden Sie für Eigenschaften mit Bindestrichen camelCase. Bevorzugen Sie das Umschalten von CSS-Klassen gegenüber dem Festlegen von Inline-Styles – Klassen halten Styles dort, wo sie hingehören: in CSS-Dateien.

element.style.backgroundColor = '#e2e8f0'; // camelCase
element.style.marginTop = '16px';
element.style.display = 'none';

// Reset inline style:
element.style.removeProperty('background-color');

Berechnete Styles lesen

getComputedStyle(element) gibt die tatsächlich angewendeten Styles nach der Kaskade zurück – nicht nur Inline-Styles. Verwenden Sie die Methode, um Styles zu lesen, die durch CSS-Klassen oder den Standard des Browsers festgelegt wurden.

const el = document.querySelector('.card');
const styles = getComputedStyle(el);
console.log(styles.fontSize);     // '16px'
console.log(styles.display);      // 'flex'

title- und meta-Tags ändern

Der Dokumenttitel (der Tab des Browsers) kann jederzeit mit document.title = 'New Title' geändert werden. Bei SPAs sorgt dies für eine bessere Benutzererfahrung, wenn zwischen Ansichten navigiert wird.

// Update tab title on route change:
document.title = `${pageName} | MyApp`;

scrollIntoView()

element.scrollIntoView({ behavior: 'smooth' }) scrollt das Element sanft in den sichtbaren Bereich. Das eignet sich ideal für eine Navigation zum jeweiligen Abschnitt und zum Hervorheben von Validierungsfehlern in Formularen.

document.querySelector('#pricing').scrollIntoView({ behavior: 'smooth', block: 'start' });

Kurzer Test

Welche Eigenschaft sollten Sie verwenden, um von Benutzerinnen und Benutzern bereitgestellten Text sicher im DOM anzuzeigen, ohne ein XSS-Risiko zu erzeugen?

Zusammenfassung: DOM ändern

textContent setzt reinen Text sicher. innerHTML setzt HTML (bei Benutzereingaben gefährlich). classList.add/remove/toggle verwaltet CSS-Klassen übersichtlich. setAttribute/dataset verwalten HTML-Attribute. Bevorzugen Sie das Umschalten von Klassen gegenüber Inline-Styles. getComputedStyle liest die endgültig angewendeten Styles.

Häufig gestellte Fragen

Ist die Lektion „Inhalte ändern: textContent, innerHTML, classList“ kostenlos?

Ja — der vollständige Text von „Inhalte ändern: textContent, innerHTML, classList“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Inhalte ändern: textContent, innerHTML, classList“?

Lesen und aktualisieren Sie den Textinhalt von Elementen, fügen Sie HTML ein und schalten Sie CSS-Klassen programmgesteuert um, fügen Sie sie hinzu oder entfernen Sie sie. Du übst Frontend 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 Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend 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 3 von 4.

Wie lange dauert die Lektion „Inhalte ändern: textContent, innerHTML, classList“?

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 Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend 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

  1. querySelector und querySelectorAll
  2. addEventListener und das Event-Objekt
  3. Inhalte ändern: textContent, innerHTML, classList
  4. Elemente erstellen und anhängen
← Zurück zu Frontend Academy