HTMLOutputElement: HTMLOutputElement() constructor

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

See full compatibility

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The HTMLOutputElement() constructor creates a new HTMLOutputElement object.

Note: Currently only Safari implements this constructor, so using Document.createElement() is recommended for broader compatibility — see the example below.

Syntax

new HTMLOutputElement()

Parameters

None.

Return value

A new HTMLOutputElement object.

Exceptions

TypeError: Thrown with the message "Illegal constructor" in browsers that do not support this constructor.

Examples

Creating an output element programmatically

Note: In practice, you would usually create <output> elements using Document.createElement() instead of this constructor, since createElement() is supported across all browsers.

This example creates an <output> element using the HTMLOutputElement() constructor and inserts it into a form that adds two numbers together.

html

<form id="my-form">
  <label>
    Number one
    <input type="number" id="a" value="5" />
  </label>
  +
  <label>
    Number two
    <input type="number" id="b" value="3" />
  </label>
  =
  <span id="output-container"></span>
</form>
<p id="warning" hidden>
  ⚠️ Your browser does not support the
  <code>HTMLOutputElement()</code> constructor.
</p>

body {
  font-family: system-ui;
}

input {
  width: 3rem;
  font-size: inherit;
}

p {
  padding: 0.25rem;
  background-color: #fff2cc;
}

try {
  new HTMLOutputElement();
} catch {
  document.getElementById("warning").hidden = false;
}

const output = new HTMLOutputElement();
output.id = "result";
output.setAttribute("for", "a b");
document.getElementById("output-container").appendChild(output);

function updateResult() {
  const a = document.getElementById("a");
  const b = document.getElementById("b");
  output.value = a.valueAsNumber + b.valueAsNumber;
}

document.getElementById("my-form").addEventListener("input", updateResult);
updateResult();

Specifications

Specification
HTML # htmloutputelement

Browser compatibility

	desktop					mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`HTMLOutputElement()` constructor Experimental	Chrome – No support Chrome footnote No support	Edge – No support Edge footnote No support	Firefox – No support Firefox footnote No support	Opera – No support Opera footnote No support	Safari – Full support Safari 15 (Release date: 2021-09-20) footnote Full support	Chrome Android – No support Chrome Android footnote No support	Firefox for Android – No support Firefox for Android footnote No support	Opera Android – No support Opera Android footnote No support	Safari on iOS – Full support Safari on iOS 15 (Release date: 2021-09-20) footnote Full support	Samsung Internet – No support Samsung Internet footnote No support	WebView Android – No support WebView Android footnote No support	WebView on iOS – Full support WebView on iOS 15 (Release date: 2021-09-20) footnote Full support

Tip: you can click/tap on a cell for more information.

Full support: Full support
No support: No support
: Experimental. Expect behavior to change in the future.

HTMLOutputElement: HTMLOutputElement() constructor

Legend