Skip to main content

Inhalte und CSS-Klassen ändern

Lernziele

Auf dieser Seite lernst du, wie du mit JavaScript sichtbare Inhalte einer Webseite veränderst. Danach kannst du:

  • Text in HTML-Elementen austauschen
  • HTML-Inhalte gezielt einfügen
  • CSS-Klassen hinzufügen, entfernen und umschalten
  • den Zustand eines Elements prüfen
  • eine kleine interaktive Oberfläche bauen

Inhalte mit textContent ändern

Nachdem du ein Element mit querySelector() ausgewählt hast, kannst du seinen Text über die Eigenschaft textContent lesen oder verändern.

<p class="nachricht">Willkommen!</p>
<button class="aendern-button">Text ändern</button>

const nachricht = document.querySelector(".nachricht");
const aendernButton = document.querySelector(".aendern-button");

aendernButton.addEventListener("click", function () {
  nachricht.textContent = "Der Text wurde geändert.";
});

Beim Klick auf den Button wird der bisherige Inhalt des Absatzes ersetzt.

Merke: textContent behandelt seinen Inhalt als reinen Text. HTML-Tags werden dabei nicht als HTML ausgeführt.

nachricht.textContent = "<strong>Hallo</strong>";

Im Browser erscheint dann tatsächlich:

<strong>Hallo</strong>

Das ist oft sinnvoll, weil Inhalte auf diese Weise sicher als Text ausgegeben werden.

Inhalte mit innerHTML ändern

Mit innerHTML kannst du nicht nur Text, sondern auch HTML-Code in ein Element einsetzen.

<p class="info"></p>

const info = document.querySelector(".info");

info.innerHTML = "Heute ist <strong>ein guter Tag</strong>.";

Das Ergebnis im Browser lautet:

Heute ist ein guter Tag.

Auch Listen oder mehrere Elemente lassen sich einsetzen:

info.innerHTML = `
  <h2>Aufgaben</h2>
  <ul>
    <li>JavaScript üben</li>
    <li>Code testen</li>
  </ul>
`;

Wann verwende ich was?

Eigenschaft Geeignet für Beispiel
textContent normalen Text Überschriften, Meldungen, Zahlen
innerHTML HTML-Strukturen Listen, Links, hervorgehobene Inhalte

Verwende textContent, wenn du nur Text ändern möchtest. Es ist einfacher und sicherer.

Mit innerHTML solltest du besonders vorsichtig sein, wenn Inhalte von Nutzerinnen und Nutzern stammen. Ungeprüfte Eingaben können unerwünschten HTML- oder JavaScript-Code enthalten.

CSS-Klassen mit classList verändern

CSS-Klassen bestimmen häufig das Aussehen eines Elements. JavaScript kann diese Klassen dynamisch ändern.

Betrachte zunächst dieses HTML:

<p class="status">Die Lampe ist aus.</p>
<button class="licht-button">Licht einschalten</button>

Und dieses CSS:

.status {
  padding: 12px;
  background-color: #eeeeee;
  color: #222222;
}

.an {
  background-color: #fff3a3;
  color: #7a4b00;
  font-weight: bold;
}

Die Klasse status sorgt für das normale Aussehen. Die Klasse an soll zusätzlich erscheinen, wenn die Lampe eingeschaltet ist.

Eine Klasse hinzufügen: classList.add()

Mit classList.add() fügst du einem Element eine CSS-Klasse hinzu.

const status = document.querySelector(".status");

status.classList.add("an");

Danach hat der Absatz beide Klassen:

<p class="status an">Die Lampe ist aus.</p>

Die CSS-Regeln von .an werden nun angewendet.

Du kannst auch mehrere Klassen gleichzeitig hinzufügen:

status.classList.add("an", "hervorgehoben");

Eine Klasse entfernen: classList.remove()

Mit classList.remove() entfernst du eine Klasse wieder.

status.classList.remove("an");

Das Element besitzt anschließend nur noch die Klasse status.

Auch hier sind mehrere Klassen möglich:

status.classList.remove("an", "hervorgehoben");

Eine Klasse umschalten: classList.toggle()

Besonders praktisch ist classList.toggle(). Die Methode prüft automatisch:

  • Ist die Klasse noch nicht vorhanden? Dann wird sie hinzugefügt.
  • Ist die Klasse schon vorhanden? Dann wird sie entfernt.
status.classList.toggle("an");

Damit eignet sich toggle() hervorragend für Schalter, Menüs, Akkordeons oder einen Dark Mode.

Beispiel: Dunklen Modus umschalten

<button class="modus-button">Dunklen Modus umschalten</button>

<main class="seite">
  <h2>Meine Webseite</h2>
  <p>Dieser Bereich kann sein Aussehen ändern.</p>
</main>

.seite {
  padding: 24px;
  background-color: white;
  color: #222222;
}

.dunkel {
  background-color: #222222;
  color: white;
}

const modusButton = document.querySelector(".modus-button");
const seite = document.querySelector(".seite");

modusButton.addEventListener("click", function () {
  seite.classList.toggle("dunkel");
});

Bei jedem Klick wird die Klasse dunkel hinzugefügt oder wieder entfernt.

Prüfen, ob eine Klasse vorhanden ist

Mit classList.contains() kannst du herausfinden, ob ein Element eine bestimmte Klasse besitzt.

const dunkelAktiv = seite.classList.contains("dunkel");

console.log(dunkelAktiv);

Das Ergebnis ist entweder true oder false.

Diese Prüfung ist nützlich, wenn sich nicht nur das Aussehen, sondern auch ein Text ändern soll.

modusButton.addEventListener("click", function () {
  seite.classList.toggle("dunkel");

  if (seite.classList.contains("dunkel")) {
    modusButton.textContent = "Hellen Modus einschalten";
  } else {
    modusButton.textContent = "Dunklen Modus einschalten";
  }
});

Nun passt der Buttontext immer zum aktuellen Zustand.

Praxisbeispiel: Eine Hinweisbox ein- und ausblenden

In diesem Beispiel wird ein Hinweis zunächst verborgen. Ein Klick auf den Button zeigt ihn an. Beim nächsten Klick wird er wieder ausgeblendet.

HTML

<button class="hinweis-button">Hinweis anzeigen</button>

<p class="hinweis versteckt">
  JavaScript wird direkt im Browser ausgeführt.
</p>

CSS

.hinweis {
  margin-top: 16px;
  padding: 12px;
  border-left: 4px solid #2c7a7b;
  background-color: #e6fffa;
}

.versteckt {
  display: none;
}

JavaScript

const hinweisButton = document.querySelector(".hinweis-button");
const hinweis = document.querySelector(".hinweis");

hinweisButton.addEventListener("click", function () {
  hinweis.classList.toggle("versteckt");

  if (hinweis.classList.contains("versteckt")) {
    hinweisButton.textContent = "Hinweis anzeigen";
  } else {
    hinweisButton.textContent = "Hinweis ausblenden";
  }
});

Was passiert hier?

  1. Der Absatz startet mit der Klasse versteckt.
  2. Diese Klasse setzt display: none.
  3. Beim Klick schaltet toggle("versteckt") die Klasse um.
  4. contains("versteckt") prüft anschließend den neuen Zustand.
  5. Der Buttontext wird passend angepasst.

✨ So entsteht eine einfache, aber echte Interaktion.

Alternative: Klassen vollständig ersetzen

Manchmal möchtest du die gesamte Klassenliste ersetzen. Dafür gibt es className.

const box = document.querySelector(".box");

box.className = "box erfolg";

Danach besitzt das Element genau die Klassen box und erfolg.

Diese Schreibweise ist möglich, aber classList ist in vielen Situationen besser lesbar und sicherer. Wenn du nur eine einzelne Klasse ändern möchtest, verwende daher meist:

box.classList.add("erfolg");

oder:

box.classList.remove("fehler");

Komplettes Beispiel: Richtige und falsche Antwort anzeigen

Dieses Beispiel verbindet Textänderungen und CSS-Klassen. Beim Klick auf einen Button erscheint eine Rückmeldung.

HTML

<h2>Kurze Frage</h2>
<p>Welche Sprache macht Webseiten interaktiv?</p>

<button class="antwort-button">JavaScript</button>
<button class="antwort-button">HTML</button>

<p class="rueckmeldung"></p>

CSS

.rueckmeldung {
  margin-top: 16px;
  padding: 12px;
  font-weight: bold;
}

.richtig {
  background-color: #d9f7df;
  color: #176b2c;
}

.falsch {
  background-color: #ffe0e0;
  color: #9b1c1c;
}

JavaScript

const antwortButtons = document.querySelectorAll(".antwort-button");
const rueckmeldung = document.querySelector(".rueckmeldung");

antwortButtons.forEach(function (button) {
  button.addEventListener("click", function () {
    rueckmeldung.classList.remove("richtig", "falsch");

    if (button.textContent === "JavaScript") {
      rueckmeldung.textContent = "Richtig! JavaScript macht Webseiten interaktiv.";
      rueckmeldung.classList.add("richtig");
    } else {
      rueckmeldung.textContent = "Noch nicht richtig. HTML beschreibt die Struktur einer Webseite.";
      rueckmeldung.classList.add("falsch");
    }
  });
});

Wichtige Beobachtungen

  • querySelectorAll() wählt beide Buttons aus.
  • forEach() richtet für jeden Button einen Klick-Listener ein.
  • Vor jeder neuen Rückmeldung werden die alten Klassen entfernt.
  • Die neue Rückmeldung erhält entweder die Klasse richtig oder falsch.

Ohne das vorherige remove() könnte eine Rückmeldung gleichzeitig beide Klassen besitzen. Das führt leicht zu widersprüchlichem CSS.

Häufige Fehler

Die Klasse wird ohne Punkt geschrieben

Bei querySelector() benötigst du für eine Klasse einen Punkt:

const box = document.querySelector(".box");

Bei classList.add() schreibst du den Klassennamen ohne Punkt:

box.classList.add("aktiv");

Das hier wäre falsch:

box.classList.add(".aktiv");

JavaScript findet das Element nicht

Wenn dieses Ergebnis erscheint:

Cannot read properties of null

wurde das Element wahrscheinlich nicht gefunden. Prüfe:

  • Ist der Klassenname im HTML korrekt?
  • Steht im Selektor ein Punkt vor dem Klassennamen?
  • Wird das JavaScript erst ausgeführt, nachdem das HTML geladen wurde?

Eine einfache Lösung ist, das <script>-Element am Ende des <body> einzubinden:

<body>
  <p class="nachricht">Hallo!</p>

  <script src="script.js"></script>
</body>

Dann existieren die HTML-Elemente bereits, wenn JavaScript gestartet wird.

Die alte Klasse bleibt erhalten

Wenn ein Element nur eine von zwei Zustandsklassen haben soll, entferne zuerst beide möglichen Klassen:

rueckmeldung.classList.remove("richtig", "falsch");

Danach fügst du die gewünschte Klasse hinzu:

rueckmeldung.classList.add("richtig");

Übung

Erstelle einen Button mit der Aufschrift „Details anzeigen“. Beim Klick soll ein Textabschnitt sichtbar werden. Der Button soll danach „Details ausblenden“ heißen. Beim nächsten Klick soll der Abschnitt wieder verschwinden.

Nutze dafür:

  • querySelector()
  • addEventListener()
  • classList.toggle()
  • classList.contains()
  • textContent

Mögliche Lösung

<button class="details-button">Details anzeigen</button>

<p class="details versteckt">
  Diese zusätzlichen Informationen sind zunächst verborgen.
</p>

.versteckt {
  display: none;
}

const detailsButton = document.querySelector(".details-button");
const details = document.querySelector(".details");

detailsButton.addEventListener("click", function () {
  details.classList.toggle("versteckt");

  if (details.classList.contains("versteckt")) {
    detailsButton.textContent = "Details anzeigen";
  } else {
    detailsButton.textContent = "Details ausblenden";
  }
});

Zusammenfassung

Mit JavaScript kannst du Inhalte und das Aussehen einer Webseite direkt verändern:

  • textContent setzt oder liest reinen Text.
  • innerHTML setzt HTML-Inhalte.
  • classList.add() fügt eine Klasse hinzu.
  • classList.remove() entfernt eine Klasse.
  • classList.toggle() schaltet eine Klasse ein oder aus.
  • classList.contains() prüft, ob eine Klasse vorhanden ist.

Damit hast du ein wichtiges Werkzeug für interaktive Webseiten: Du kannst auf Aktionen reagieren und sichtbares Feedback geben. Im nächsten Schritt lernst du, Ereignisse mit addEventListener() noch gezielter einzusetzen.

Back to top