HTMLElement.innerText — Eigenschaft · JavaScript-Referenz

Signatur

HTMLElement.innerText

Beschreibung

Die Eigenschaft innerText liefert den Text eines Elements so, wie ihn der Benutzer auf dem Bildschirm sieht. Anders als textContent berücksichtigt sie CSS: Per display: none oder visibility: hidden ausgeblendete Inhalte fehlen, Inhalte von <script> und <style> werden ignoriert, Blockelemente und <br> werden zu Zeilenumbrüchen, und Leerraum wird nach den Regeln von white-space zusammengefasst. Auch text-transform wirkt sich auf das Ergebnis aus.

Lesen: Praktisch ist das, wenn Sie Text so übernehmen wollen, wie er dargestellt wird, etwa für „In die Zwischenablage kopieren“-Funktionen, Textvorschauen oder Tests, die sichtbaren Inhalt prüfen. Ist das Element nicht gerendert (z. B. nicht im Dokument eingehängt oder selbst per display: none ausgeblendet), gibt innerText denselben Wert wie textContent zurück.

Schreiben: Beim Zuweisen werden alle Kindknoten des Elements entfernt und durch einen Textknoten mit dem angegebenen String ersetzt. Zeilenumbrüche (\n) werden dabei in <br>-Elemente umgewandelt. HTML im String wird nicht interpretiert, sondern als reiner Text eingefügt. Deshalb ist das Zuweisen von Benutzereingaben eine sichere Alternative zu innerHTML.

Parameter

Name	Typ	Default	Beschreibung
$value	string		Nur beim Schreiben: der neue Textinhalt. Nicht-Strings werden in einen String umgewandelt, `null` ergibt einen leeren String. `\n` wird zu `<br>`.

Rückgabewert

Typ

string

Beschreibung

Beim Lesen der gerenderte Text des Elements und seiner Nachkommen, mit Zeilenumbrüchen für Blockelemente und ohne ausgeblendete Inhalte. Ist das Element nicht gerendert, entspricht der Wert textContent.

Beispiele

Unterschied zwischen innerText und textContent

document.body.insertAdjacentHTML('beforeend', `
  <div id="box">
    <p>Sichtbar</p>
    <p style="display:none">Versteckt</p>
    <span style="text-transform:uppercase">klein</span>
  </div>`);

const box = document.getElementById('box');
console.log(JSON.stringify(box.innerText));
console.log(box.textContent.includes('Versteckt'));

"Sichtbar\n\nKLEIN" true

Benutzereingabe sicher als Text ausgeben

const input = '<img src=x onerror="alert(1)">\nZweite Zeile';
const output = document.createElement('p');
output.innerText = input; // kein HTML-Parsing, \n wird zu <br>
document.body.append(output);

console.log(output.innerHTML);

<img src=x onerror="alert(1)"><br>Zweite Zeile

Sichtbaren Text in die Zwischenablage kopieren

const copyButton = document.querySelector('#copy');
const article = document.querySelector('article');

copyButton?.addEventListener('click', async () => {
  try {
    await navigator.clipboard.writeText(article.innerText);
    console.log('Text kopiert');
  } catch (err) {
    console.error('Kopieren fehlgeschlagen:', err);
  }
});

Text kopiert

// Wichtig · Fallstricke

Leistung: Beim Lesen von innerText muss der Browser das Layout berechnen, was einen Reflow auslösen kann. In Schleifen oder bei großen DOM-Bäumen deutlich langsamer als textContent. Wenn der rohe Text genügt, nehmen Sie textContent.
Zerstörerisches Schreiben: Das Zuweisen entfernt alle Kindelemente samt ihrer Event-Listener. Referenzen auf die alten Kindknoten zeigen danach auf Knoten, die nicht mehr im Dokument hängen.
Nicht gerenderte Elemente: Für Elemente außerhalb des Dokuments oder mit display: none verhält sich innerText wie textContent, CSS-Regeln haben dann keine Wirkung.
Sicherheit: Das Schreiben ist XSS-sicher, weil kein HTML geparst wird. Im Gegensatz dazu ist innerHTML mit nicht vertrauenswürdigen Daten gefährlich.
Kompatibilität: Wird in allen aktuellen Browsern unterstützt, Firefox erst seit Version 45. Ältere Implementierungen weichen bei Leerraum und Zeilenumbrüchen teils ab. Nur auf HTMLElement vorhanden, nicht auf SVG-Elementen oder Textknoten (dort textContent verwenden).
Siehe auch outerText: Beim Schreiben ersetzt es das Element selbst durch Text.

Siehe auch

Node.textContent Element.innerHTML HTMLElement.outerText Element.outerHTML HTMLElement Clipboard.writeText() HTMLModElement.dateTime