HTMLOutputElement: HTMLOutputElement() Konstruktor - Web-APIs | MDN
Eingeschränkt verfügbar
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Der HTMLOutputElement() Konstruktor erstellt ein neues HTMLOutputElement Objekt.
Hinweis:
Derzeit implementiert nur Safari diesen Konstruktor, daher wird die Verwendung von Document.createElement() für eine breitere Kompatibilität empfohlen — siehe das Beispiel unten.
Syntax
js
new HTMLOutputElement()
Parameter
Keine.
Rückgabewert
Ein neues HTMLOutputElement Objekt.
Ausnahmen
TypeError-
Wird mit der Nachricht
"Illegal constructor"in Browsern ausgelöst, die diesen Konstruktor nicht unterstützen.
Beispiele
Programmgesteuertes Erstellen eines output-Elements
Hinweis:
In der Praxis würden Sie normalerweise <output>-Elemente mit Document.createElement() erstellen, anstatt diesen Konstruktor zu verwenden, da createElement() in allen Browsern unterstützt wird.
Dieses Beispiel erstellt ein <output>-Element mit dem HTMLOutputElement() Konstruktor und fügt es in ein Formular ein, das zwei Zahlen addiert.
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;
}
js
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();
Spezifikationen
| Spezifikation |
|---|
| HTML # htmloutputelement |
Browser-Kompatibilität
Siehe auch
Help improve MDN
Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.