Ändern Sie den Text eines Div mit Javascript

Um den Text eines div zu ändern, wählen Sie das Element aus und weisen Sie seiner Eigenschaft textContent eine Zeichenfolge zu. Diese wird als Text behandelt, auch wenn sie Zeichen wie < oder > enthält.

Den Text eines div mit textContent ändern

Fügen Sie das Skript auf einer Browserseite nach dem Element ein oder führen Sie es aus, nachdem das Dokument geladen wurde. Der Selektor muss das gewünschte div finden.

<div id="message">Welcome</div>
<script>
  const message = document.querySelector("#message");
  message.textContent = "Hello, world!";
</script>

Das Browserbeispiel oben aktualisiert die tatsächliche Seite und zeigt dort das Label „Welcome“ an; es bleibt im unveränderten Beispiel auf Englisch. Das folgende kleine JavaScript-Beispiel veranschaulicht die Zuweisung an die Eigenschaft und den angezeigten Wert „Hello, world!“; auch dieses Label bleibt auf Englisch. Führen Sie es aus:

const div = { textContent: "" };
div.textContent = "Hello, world!";
console.log(div.textContent);

Hello, world!

Dieses ausführbare Beispiel verwendet ein einfaches Objekt, um die Zuweisung an die Eigenschaft und die Ausgabe zu zeigen; das HTML-Beispiel veranschaulicht die Aktualisierung einer tatsächlichen Seite. Eine Zuweisung an textContent ersetzt die untergeordneten Knoten des Elements durch einen Textknoten mit der neuen Zeichenfolge. Verwenden Sie die Eigenschaft, wenn Sie reinen Text einfügen möchten, insbesondere wenn der Wert von einem Benutzer oder einer anderen nicht vertrauenswürdigen Quelle stammt.

Zwischen textContent und innerHTML wählen

Verwenden Sie textContent für Text. innerHTML interpretiert die zugewiesene Zeichenfolge als HTML und ersetzt die untergeordneten Elemente durch die daraus erzeugten Knoten. Verwenden Sie es daher nur, wenn Sie Markup einfügen möchten. Nicht vertrauenswürdige Daten in einem Kontext einzufügen, der HTML interpretiert, kann ein Cross-Site-Scripting-Risiko darstellen; das Interpretieren von Markup bedeutet jedoch nicht, dass jede Zeichenfolge automatisch als Code ausgeführt wird.

Wird beispielsweise die Zeichenfolge <strong>Hi</strong> textContent zugewiesen, erscheinen diese Zeichen wörtlich. Bei einer Zuweisung an innerHTML wird ein strong-Element erzeugt, sodass der Browser „Hi“ fett darstellt. Wenn Sie Markup benötigen, halten Sie es von nicht vertrauenswürdigen Werten getrennt und verwenden Sie eine geeignete sichere Darstellungsmethode.

Weitere JavaScript-Methoden zum Aktualisieren von Text verwenden

innerText liest oder setzt den dargestellten Text und kann Formatierung und Layout berücksichtigen. Verwenden Sie es, wenn dieses Verhalten wichtig ist. Für einen einfachen Austausch des Textes ist textContent in der Regel klarer.

Mit createTextNode können Sie einen Textknoten erstellen und beim schrittweisen Aufbau von DOM-Inhalten die vorhandenen untergeordneten Knoten durch diesen ersetzen. Template-Literale, die mit Backticks geschrieben werden, erleichtern das Zusammensetzen dynamischer Zeichenfolgen; eine Zuweisung des Ergebnisses an textContent behandelt es weiterhin als Text. Wenn Ihre Seite bereits jQuery lädt, setzt $("#message").text("Hello, world!") den Text des ausgewählten Elements. Ohne jQuery verwenden Sie die oben gezeigten DOM-APIs des Browsers.

Mit CSS generierten Inhalt für dekorativen Text verwenden

CSS-Pseudoelemente ::before und ::after können dekorative Elemente hinzufügen, etwa ein kleines Label neben einem Element. Generierter Inhalt aktualisiert weder den DOM-Text des div noch den Text per JavaScript und eignet sich nicht für wesentliche Informationen oder interaktive Inhalte. Bei einigen ersetzten Elementen, darunter img, wird generierter Inhalt anders dargestellt als bei gewöhnlichen Elementen. Verwenden Sie textContent, wenn der Text zum tatsächlichen Seiteninhalt gehören soll.