new HTMLOutputElement() — Methode · JavaScript-Referenz

Signatur

new HTMLOutputElement()

Beschreibung

HTMLOutputElement ist das DOM-Interface des HTML-Elements <output>. Dieses Element zeigt das Ergebnis einer Berechnung oder einer Nutzeraktion an, zum Beispiel eine Summe in einem Formular. Das Interface erbt von HTMLElement und hat zusätzlich unter anderem value, defaultValue, htmlFor, form, name, labels und die Methoden der Constraint-Validation-API (checkValidity(), setCustomValidity() usw.).

Wichtig: Wenn du new HTMLOutputElement() direkt aufrufst, wirft der Browser einen TypeError: Illegal constructor. Wie bei fast allen HTML-Element-Interfaces gilt der Konstruktor als HTML-Konstruktor. Er funktioniert nur, wenn eine registrierte Custom-Element-Klasse ihn über super() aufruft.

Im Alltag erzeugst du ein <output>-Element so:

mit document.createElement('output') (der übliche Weg),
über HTML-Markup, zum Beispiel mit innerHTML oder einem Template, oder
als angepasstes eingebautes Element (Customized Built-in): class X extends HTMLOutputElement zusammen mit customElements.define(name, X, { extends: 'output' }).

Rückgabewert

Typ

HTMLOutputElement

Beschreibung

Beim direkten Aufruf gibt es keinen Rückgabewert, stattdessen wird ein TypeError geworfen. Ruft eine registrierte Unterklasse super() auf, entsteht eine neue HTMLOutputElement-Instanz, also ein <output>-Element.

Beispiele

Direkter Aufruf wirft einen Fehler

try {
  const out = new HTMLOutputElement();
} catch (err) {
  console.log(err.name, '-', err.message);
}

TypeError - Illegal constructor

Richtiger Weg: document.createElement und Formular-Berechnung

const form = document.createElement('form');
form.innerHTML = `
  <input type="number" id="a" value="3"> +
  <input type="number" id="b" value="4"> =
`;

const result = document.createElement('output');
result.name = 'summe';
result.htmlFor.add('a', 'b'); // DOMTokenList mit den IDs der Eingabefelder
form.append(result);
document.body.append(form);

const berechne = () => {
  const a = form.querySelector('#a').valueAsNumber || 0;
  const b = form.querySelector('#b').valueAsNumber || 0;
  result.value = String(a + b);
};

form.addEventListener('input', berechne);
berechne();

console.log(result instanceof HTMLOutputElement, result.value, result.htmlFor.value);

true "7" "a b"

Customized Built-in: Unterklasse ruft den Konstruktor per super() auf

class EuroOutput extends HTMLOutputElement {
  constructor() {
    super(); // hier ist der HTML-Konstruktor erlaubt
    this.formatter = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' });
  }
  setBetrag(zahl) {
    this.value = this.formatter.format(zahl);
  }
}

customElements.define('euro-output', EuroOutput, { extends: 'output' });

// Erzeugung: entweder mit new oder über createElement mit der Option "is"
const preis = new EuroOutput();
// const preis = document.createElement('output', { is: 'euro-output' });
preis.setBetrag(1234.5);
document.body.append(preis);
console.log(preis.value, preis.localName);

1.234,50 € output

// Wichtig · Fallstricke

Illegal constructor: new HTMLOutputElement() wirft ohne registrierte Unterklasse in allen Browsern einen TypeError. Nutze stattdessen document.createElement('output').
Safari/WebKit: Customized Built-ins (extends: 'output' und das Attribut is="…") werden dort nicht unterstützt. Dann brauchst du einen Polyfill (z. B. @ungap/custom-elements) oder ein autonomes Custom Element, das ein <output> enthält.
value ist immer ein String und entspricht dem Textinhalt (textContent). Setzt du value, werden alle Kindknoten ersetzt. defaultValue gibt den Wert an, der beim Zurücksetzen des Formulars wiederhergestellt wird.
htmlFor ist eine DOMTokenList und kein String. Du veränderst sie mit add(), remove() oder value.
Barrierefreiheit: <output> hat implizit role="status". Viele Screenreader lesen Änderungen deshalb automatisch vor (Live-Region).
<output> wird nicht mit dem Formular übertragen, obwohl es ein name-Attribut haben kann.

Siehe auch

new DocumentFragment() new HTMLGeolocationElement() new MouseEvent() new TextUpdateEvent() new CloseEvent()