Document: createElement()-Methode
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
In einem HTML-Dokument erstellt die document.createElement()
-Methode das durch tagName angegebene HTML-Element oder ein HTMLUnknownElement
, wenn tagName nicht erkannt wird.
Syntax
createElement(tagName)
createElement(tagName, options)
Parameter
tagName
-
Ein String, der den Typ des zu erstellenden Elements angibt. Der
nodeName
des erstellten Elements wird mit dem Wert von tagName initialisiert. Verwenden Sie keine qualifizierten Namen (wie "html:a") mit dieser Methode. Wenn die Methode auf einem HTML-Dokument aufgerufen wird, wandeltcreateElement()
tagName in Kleinbuchstaben um, bevor das Element erstellt wird. In Firefox, Opera und Chrome funktioniertcreateElement(null)
wiecreateElement("null")
. options
Optional-
Ein Objekt mit den folgenden Eigenschaften:
is
-
Der Tag-Name eines benutzerdefinierten Elements, das zuvor über
customElements.define()
definiert wurde. Weitere Details finden Sie im Webkomponenten-Beispiel.
Rückgabewert
Das neue Element
.
Hinweis: Ein neues HTMLElement wird zurückgegeben, wenn das Dokument ein HTMLDocument ist, was der häufigste Fall ist. Andernfalls wird ein neues Element zurückgegeben.
Beispiele
Einfaches Beispiel
Dies erstellt ein neues <div>
und fügt es vor dem Element mit der ID div1
ein.
HTML
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Working with elements</title>
</head>
<body>
<div id="div1">The text above has been created dynamically.</div>
</body>
</html>
JavaScript
document.body.onload = addElement;
function addElement() {
// create a new div element
const newDiv = document.createElement("div");
// and give it some content
const newContent = document.createTextNode("Hi there and greetings!");
// add the text node to the newly created div
newDiv.appendChild(newContent);
// add the newly created element and its content into the DOM
const currentDiv = document.getElementById("div1");
document.body.insertBefore(newDiv, currentDiv);
}
Ergebnis
Webkomponenten-Beispiel
Hinweis: Überprüfen Sie den Abschnitt zur Browser-Kompatibilität für Unterstützung und die is
-Attributreferenz für Hinweise zur Implementierungsrealität von benutzerdefinierten eingebauten Elementen.
Der folgende Beispielcode stammt aus unserem expanding-list-web-component-Beispiel (sehen Sie es auch live). In diesem Fall erweitert unser benutzerdefiniertes Element das HTMLUListElement
, das das <ul>
-Element darstellt.
// Create a class for the element
class ExpandingList extends HTMLUListElement {
constructor() {
// Always call super first in constructor
super();
// constructor definition left out for brevity
// …
}
}
// Define the new element
customElements.define("expanding-list", ExpandingList, { extends: "ul" });
Wenn wir ein solches Element programmatisch erstellen wollten, würden wir einen Aufruf wie den folgenden verwenden:
let expandingList = document.createElement("ul", { is: "expanding-list" });
Das neue Element erhält ein is
-Attribut, dessen Wert der Tag-Name des benutzerdefinierten Elements ist.
Hinweis: Aus Gründen der Abwärtskompatibilität mit früheren Versionen der Custom Elements Specification erlauben einige Browser, hier einen String anstelle eines Objekts zu übergeben, wobei der Wert des Strings der Tag-Name des benutzerdefinierten Elements ist.
Spezifikationen
Specification |
---|
DOM Standard # ref-for-dom-document-createelement① |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
Node.removeChild()
Node.replaceChild()
Node.appendChild()
Node.insertBefore()
Node.hasChildNodes()
document.createElementNS()
— um explizit den Namensraum-URI für das Element anzugeben.