Wie kann ich mit JavaScript den Text einer h2-Überschrift dynamisch ändern?
Ursprünglicher Überschriftstext
Unten sehen Sie ein Beispiel, wie Sie mit JavaScript den Text einer <h2>-Überschrift dynamisch ändern können. Das funktioniert, indem Sie das gewünschte <h2>-Element im DOM (Document Object Model) auswählen und anschließend seine Texteigenschaft anpassen.
Element auswählen
Zunächst müssen Sie die <h2>-Überschrift, deren Text Sie ändern möchten, im JavaScript-Code auswählen. Dies kann auf verschiedene Arten passieren, beispielsweise durch eine ID, eine Klasse oder andere Selektoren. Im Beispiel besitzt das <h2>-Element die ID meineUeberschrift. Mit document.getElementById(meineUeberschrift) greifen wir darauf zu.
Textinhalt ändern
Der wichtigste Schritt ist das Ändern des Textes der Überschrift. Im JavaScript-Objekt des Elements gibt es Eigenschaften, die den Text repräsentieren, wie textContent oder innerText. Beide können verwendet werden, um den sichtbaren Text zu setzen oder auszulesen. Im Beispiel nutzen wir textContent:
document.getElementById(meineUeberschrift).textContent = Neuer Überschriftstext;Vollständiges Beispiel
Hier ist das komplette Beispiel mit einem Button, der beim Klicken den Text der <h2>-Überschrift ändert: