Eine JavaScript-Variable im HTML-Body anzeigen

Um eine JavaScript-Variable als Text auf einer Seite anzuzeigen, wählen Sie ein vorhandenes HTML-Element aus und weisen Sie seinen Wert der Eigenschaft textContent zu. Dadurch wird der Inhalt des Elements im Dokumentkörper aktualisiert; ein Dialog wird nicht geöffnet. Platzieren Sie das Skript hinter dem Zielelement oder sorgen Sie dafür, dass es erst ausgeführt wird, nachdem das Dokument geparst wurde.

Eine JavaScript-Variable mit textContent im HTML-Body anzeigen

Das folgende Beispiel fügt die Variable in einen Absatz ein. Da das Inline-Skript auf den Absatz folgt, findet document.getElementById("greeting") das Element, wenn die Zuweisung ausgeführt wird. Ändern Sie name in den Wert, den Sie anzeigen möchten. Im Browser erscheint dann „Hello, Robert!“ als normaler Text auf der Seite. Die unveränderte Beispielausgabe bleibt auf Englisch.

Führen Sie dieses Beispiel aus:

Der Code und die angezeigten Bezeichnungen oder Ausgaben in diesem Abschnitt bleiben auf Englisch.

const output = { textContent: "" };
const document = {
  getElementById(id) {
    return id === "greeting" ? output : null;
  }
};
const name = "Robert";
document.getElementById("greeting").textContent = `Hello, ${name}!`;
console.log(output.textContent);

Hello, Robert!

Dieses kleine, ausführbare Beispiel verwendet einen einfachen Ersatz für ein Element, damit die Zuweisung in einer JavaScript-Laufzeitumgebung ausgeführt werden kann. Verwenden Sie im Browser wie hier gezeigt das tatsächliche DOM-Element:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Greeting</title>
</head>
<body>
  <p id="greeting"></p>
  <script>
    const name = "Robert";
    document.getElementById("greeting").textContent = `Hello, ${name}!`;
  </script>
</body>
</html>

Für einfachen Text ist textContent die eindeutigste Wahl. Die Eigenschaft ersetzt den Inhalt des ausgewählten Elements durch Text. Zeichenfolgen, die wie Markup aussehen, werden daher angezeigt, statt als HTML geparst zu werden. Liefert die Auswahl kein Element, müssen Sie die Seitenstruktur oder den Ausführungszeitpunkt des Skripts prüfen: Stellen Sie sicher, dass die ID übereinstimmt und das Zielelement vorhanden ist, bevor die Zuweisung ausgeführt wird. Ein klassisches externes Skript im Dokumentkopf kann mit defer so ausgeführt werden, dass es nach dem Parsen des Dokuments läuft. defer verzögert kein klassisches Inline-Skript. Befindet sich ein Inline-Skript im Kopf, warten Sie, bis das Zielelement vorhanden ist, etwa indem Sie auf DOMContentLoaded reagieren, oder platzieren Sie das Skript wie im obigen Beispiel hinter dem Element.

innerHTML nur für das Einfügen vertrauenswürdigen HTML verwenden

innerHTML parst den zugewiesenen Wert als Markup und ersetzt die untergeordneten Knoten des Elements. Das ist nützlich, wenn der vorgesehene Wert HTML ist, das Sie kontrollieren, etwa ein gezielt erstelltes Hervorhebungselement. Für einen Namen, eine Nachricht oder eine andere Textvariable verwenden Sie weiterhin textContent: Wenn externe oder von Benutzern bereitgestellte Texte als Markup behandelt werden, kann dadurch eine Cross-Site-Scripting-Schwachstelle entstehen.

Wird beispielsweise "<strong>Hello</strong>" textContent zugewiesen, erscheinen die spitzen Klammern und das Tag als Text. Weisen Sie dieselbe Zeichenfolge innerHTML zu, entsteht ein fett dargestelltes Hello-Element. Entscheiden Sie danach, ob der Wert Text oder vertrauenswürdiges Markup sein soll, und vermeiden Sie es, HTML durch Verketten nicht vertrauenswürdiger Werte zu erstellen.

Warum document.write() und window.alert() keine gleichwertigen Methoden zur Ausgabe von Text im Body sind

document.write() ist eine Methode, die während des Parsens der Seite durch den Browser in den Dokumentdatenstrom schreibt. In einem Beispiel, das während des Parsens ausgeführt wird, kann sie scheinbar funktionieren; zum Aktualisieren eines vorhandenen Elements ist sie jedoch ungeeignet. Wird sie aufgerufen, nachdem das Dokument geladen wurde, kann sie das Dokument ersetzen. Verwenden Sie für gewöhnliche Aktualisierungen der Seite daher DOM-Methoden wie textContent.

window.alert() ist ebenfalls eine Methode, zeigt aber einen vorübergehenden Dialog an, den die lesende Person schließen muss. Der Wert wird nicht in den HTML-Body der Seite eingefügt, und der Dialog unterbricht die Interaktion, solange er geöffnet ist. Verwenden Sie die Methode nur, wenn ein Dialog ausdrücklich passend ist. Soll ein Wert dauerhaft sichtbar auf der Seite stehen, verwenden Sie textContent.