HTMLOutputElement: HTMLOutputElement() constructor
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
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.
<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>
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 |