HTMLElement.outerText — Eigenschaft · JavaScript-Referenz

Signatur

HTMLElement.outerText

Beschreibung

outerText ist eine Eigenschaft der Schnittstelle HTMLElement und kann gelesen und geschrieben werden. Beim Lesen liefert sie exakt denselben Wert wie HTMLElement.innerText: den Text so, wie er dargestellt wird. CSS wird also berücksichtigt, ausgeblendete Inhalte (display: none) fehlen und Blockelemente sowie   werden zu Zeilenumbrüchen.

Beim Schreiben unterscheidet sich outerText grundlegend von innerText. Ersetzt wird nicht nur der Inhalt, sondern das Element selbst, einschließlich seines öffnenden und schließenden Tags. Übrig bleiben Textknoten, wobei Zeilenumbrüche (\n, \r) zu  -Elementen werden. Anschließend werden benachbarte Textknoten zusammengeführt.

Typische Einsätze: ein Element „auspacken“ und nur seinen Text stehen lassen, etwa um Hervorhebungen wie  oder  zu entfernen, oder einen Platzhalter durch reinen Text ersetzen. Der zugewiesene Wert wird nie als HTML ausgewertet, daher ist das auch mit Benutzereingaben unbedenklich.

Parameter

Name	Typ	Default	Beschreibung
$value	string		Nur beim Schreiben: Der Text, der das Element vollständig ersetzt. Zeilenumbrüche werden zu `<br>`. Andere Werte werden in einen String umgewandelt (`null` wird zu `""`).

Rückgabewert

Typ

string

Beschreibung

Der dargestellte Textinhalt des Elements und seiner Nachfahren, identisch mit innerText. Ist das Element nicht gerendert (z. B. nicht im Dokument oder mit display: none), entspricht der Wert dem von textContent.

Beispiele

Lesen: gleicher Wert wie innerText

// HTML: <p id="hinweis">Hallo <strong>Welt</strong><span hidden>geheim</span></p>
const p = document.querySelector('#hinweis');

console.log(p.outerText);
console.log(p.outerText === p.innerText);

Hallo Welt true

Hervorhebungen entfernen (Element auspacken)

// HTML: <p id="text">Suche nach <mark>JavaScript</mark> und <mark>DOM</mark>.</p>
const absatz = document.querySelector('#text');

// Jedes <mark> wird durch seinen reinen Text ersetzt
absatz.querySelectorAll('mark').forEach((mark) => {
  mark.outerText = mark.innerText;
});

console.log(absatz.innerHTML);
console.log(absatz.childNodes.length); // Textknoten wurden zusammengeführt

Suche nach JavaScript und DOM. 1

Unterschied zu innerText beim Schreiben

const box = document.createElement('div');
box.innerHTML = '<span id="a">alt</span> | <span id="b">alt</span>';
document.body.append(box);

box.querySelector('#a').innerText = 'neu';           // nur der Inhalt
box.querySelector('#b').outerText = 'Zeile 1\nZeile 2'; // ganzes Element

console.log(box.innerHTML);

neu | Zeile 1 Zeile 2

Fehler bei Elementen ohne Elternknoten

const span = document.createElement('span');

try {
  span.outerText = 'Text';
} catch (err) {
  console.log(err.name);
}

NoModificationAllowedError

// Wichtig · Fallstricke

Das Element verschwindet: Nach dem Schreiben verweist die Variable weiterhin auf das nun abgelöste Element. Weitere Änderungen daran wirken sich nicht mehr auf die Seite aus.
Kein Elternknoten: Hat das Element keinen Elternknoten (z. B. frisch mit createElement erzeugt), wirft das Schreiben eine DOMException vom Typ NoModificationAllowedError.
Performance: Wie innerText braucht das Lesen aktuelle Layoutinformationen und kann einen Reflow auslösen. In Schleifen mit vielen Elementen ist textContent deutlich schneller, wenn CSS keine Rolle spielt.
Sicherheit: Der zugewiesene Wert wird nicht als HTML interpretiert. Anders als bei outerHTML besteht deshalb kein XSS-Risiko.
Kompatibilität: Chromium und Safari unterstützen die Eigenschaft seit Langem, Firefox erst ab Version 98 (2022). Sehr alte Firefox-Versionen liefern undefined. Seit 2022 ist die Eigenschaft im HTML Living Standard festgelegt.

Siehe auch

HTMLElement.innerText Node.textContent Element.outerHTML Element.innerHTML Element.replaceWith() ElementInternals.ariaValueText HTMLElement.autocorrect