HTMLPreElement — Schnittstelle · JavaScript-Referenz

Signatur

interface HTMLPreElement extends HTMLElement

Beschreibung

Das Interface HTMLPreElement steht für ein <pre>-Element, also einen Block mit vorformatiertem Text. Der Browser zeigt Leerzeichen, Tabulatoren und Zeilenumbrüche darin so an, wie sie im Quelltext stehen, und verwendet meist eine Schrift mit fester Zeichenbreite. Typische Einsatzfälle sind Quellcode-Listings, Konsolenausgaben, ASCII-Grafiken und formatiertes JSON.

Alle Eigenschaften und Methoden von HTMLElement, Element, Node und EventTarget werden geerbt. Dazu kommt nur eine eigene Eigenschaft:

width (number): Spiegelt das HTML-Attribut width wider, also die gewünschte Anzahl Zeichen pro Zeile. Die Eigenschaft ist veraltet, und aktuelle Browser werten sie beim Rendern nicht mehr aus.

Auch die veralteten Elemente <listing> und <xmp> werden im DOM als HTMLPreElement dargestellt. Eine Instanz bekommst du mit document.createElement("pre") oder über Abfragen wie document.querySelector("pre"). Einen eigenen Konstruktor, den man mit new HTMLPreElement() aufrufen kann, gibt es nicht.

Rückgabewert

Typ

HTMLPreElement

Beschreibung

Eine Instanz bekommst du über document.createElement("pre") oder über DOM-Abfragen.

Beispiele

JSON formatiert in einem <pre>-Block anzeigen

const daten = { name: "Ada", sprachen: ["JS", "Rust"], aktiv: true };

const pre = document.createElement("pre");
// textContent statt innerHTML: kein XSS-Risiko
pre.textContent = JSON.stringify(daten, null, 2);
document.body.append(pre);

console.log(pre instanceof HTMLPreElement);
console.log(pre.textContent.split("\n").length);

true 7

Code-Listing mit <code> und Kopier-Button

const pre = document.createElement("pre");
const code = document.createElement("code");
code.className = "language-js";
code.textContent = `const summe = (a, b) => a + b;\nconsole.log(summe(2, 3));`;
pre.append(code);

const button = document.createElement("button");
button.textContent = "Kopieren";
button.addEventListener("click", async () => {
  await navigator.clipboard.writeText(pre.textContent);
  button.textContent = "Kopiert!";
});

document.body.append(pre, button);

Alle <pre>-Blöcke finden und die veraltete width-Eigenschaft auslesen

document.body.insertAdjacentHTML("beforeend", '<pre width="40">Zeile 1\nZeile 2</pre>');

const bloecke = document.querySelectorAll("pre");
for (const pre of bloecke) {
  console.log(pre.tagName, pre.width, pre.textContent.length);
}

PRE 40 15

// Wichtig · Fallstricke

Führender Zeilenumbruch: Der HTML-Parser entfernt einen Zeilenumbruch, der direkt auf <pre> folgt. Setzt du den Inhalt dagegen per textContent, bleibt der Umbruch stehen. Dadurch kann oben eine Leerzeile entstehen.
Sicherheit: Code oder Benutzereingaben niemals mit innerHTML in einen <pre>-Block schreiben. Sonst werden Zeichen wie < als HTML ausgewertet, und es droht XSS. Verwende textContent. Wenn du HTML-Quelltext schreiben musst, codiere <, > und & vorher als Entitäten.
width ist veraltet: Die Breite steuerst du besser per CSS, zum Beispiel mit max-width: 80ch. Für automatische Zeilenumbrüche eignet sich white-space: pre-wrap, für langen Inhalt overflow-x: auto.
Semantik: Für Quellcode empfiehlt es sich, ein <code>-Element in <pre> einzubetten. So erkennen Screenreader und Syntax-Highlighter den Inhalt als Code.
Kompatibilität: Das Interface wird von allen Browsern seit Langem unterstützt. <listing> und <xmp> sind veraltet und sollten nicht mehr verwendet werden.

Siehe auch

HTMLBRElement HTMLHRElement HTMLAreaElement HTMLBaseElement HTMLDivElement