Document.createElement()
In einem HTML Dokument erstellt die Document.createElement()
Methode ein spezifiziertes HTML Element oder ein HTMLUnknownElement
wenn der gegebene Elementname ein unbekannter ist.
Syntax
var element = document.createElement(tagName, [optionen]);
Parameter
tagName
- Ein String der den Typ des zu erstellenden Elements spezifiziert. Der/Die/Das
nodeName
(en-US) des erstellten Elements ist mit dem Wert vontagName
initialisiert. Benutze keine qualifizierten Namen (wie "html:a") mit dieser Methode. optionen
Optional- Ein optionales
ElementCreationOptions
-Objekt, welches eine einzige Eigenschaft namensis
besitzt, deren Wert der Name des Tags für ein benutzerdefiniertes Element ist. Dieses benutzerdefinierte Element muss vorher mitcustomElements.define()
definiert werden. Für mehr Informationen siehe Web component example.
Rückgabewert
Das neue Element
.
Beispiele
Grundlegendes Beispiel
Dies erstellt ein neues <div>
und fügt es vor dem Element mit der ID div1
ein.
HTML
<!DOCTYPE html>
<html>
<head>
<title>||Arbeiten mit Elementen||</title>
</head>
<body>
<div id="div1">Der obere Text wurde dynamisch erstellt.</div>
</body>
</html>
JavaScript
document.body.onload = addElement;
function addElement () {
// erstelle ein neues div Element
// und gib ihm etwas Inhalt
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hi there and greetings!");
newDiv.appendChild(newContent); // füge den Textknoten zum neu erstellten div hinzu.
// füge das neu erstellte Element und seinen Inhalt ins DOM ein
var currentDiv = document.getElementById("div1");
document.body.insertBefore(newDiv, currentDiv);
}
Web-Komponentenbeispiel
Das folgende Beispiel wurde aus dem Beispiel expanding-list-web-component entnommen (Siehe es live). In diesem Fall erweitert unser Custom-Element die HTMLUListElement
(en-US), welche das <ul>
Element repräsentiert.
// Erstelle eine Klasse für das Element
class ExpandingList extends HTMLUListElement {
constructor() {
// Rufe immer super() in einem Konstruktor auf.
super();
// Konstruktordefinition wurde der kürze halber weggelassen
...
}
}
// Definiere das neue Element
customElements.define('expanding-list', ExpandingList, { extends: "ul" });
Würden wir eine Instanz dieses Elements programmatisch erstellen wollen, so würden wir einen Aufruf über den folgenden Ausschnitt machen:
let expandingList = document.createElement('ul', { is : 'expanding-list' })
Dem neuen Element wird ein is
Attribut hinzugefügt, dessen Wert das Custom-Element's Tag-Name ist.
Notiz: Für Backwards-Kompatiblität mit früheren Versionen der Spezifikationen des Custom-Elements, erlauben einige Browser einen String, statt einem Objekt, als Parameter zu übergeben, wobei der Wert des Strings der Tag-Name des Custom-Elements ist.
Notizen
- Beim Aufruf auf ein als Dokument-Objekt gekennzeichnetes HTML-Dokument schreibt
createElement()
seine Argumente in Kleinbuchstaben, bevor es das diese erstellt. - Um ein Element mit qualifizierem Namen und namespace URl zu erstellen nutze
document.createElementNS()
stattessen . - Vor Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), konntest du abgewinkelte Klammern (< und >) um
tagName
im Quirks-Modus setzen; seit Gecko 2.0 verhält sich die Funktion im Quirks-Modus und im Standard-Modus gleich. - Seit Gecko 19.0 (Firefox 19.0 / Thunderbird 19.0 / SeaMonkey 2.16)
createElement(null)
hat das gleiche bewirkt wiecreateElement("null")
. Bemerke, dass Opera funktioniert mit null ebenfalls, während Chrome und Internet Explorer beide Fehler ausgeben würden. - Seit Gecko 22.0 (Firefox 22.0 / Thunderbird 22.0 / SeaMonkey 2.19) benutzt
createElement()
nicht mehr dieHTMLSpanElement
(en-US) Schnittstelle, wenn das Argument "bgsounds", "multicol", oder "image" ist. Stattdessen wirdHTMLUnknownElement
für"bgsound" und "multicol" verwendet, undHTMLElement
(en-US)HTMLElement
wird für "image" verwendet. - Die Gecko Implementierung von
createElement
ist nicht konform mit der DOM Spezifikation für XUL und XHTML Dokumente:localName
undnamespaceURI
werden beim erstellten Element nicht aufnull
gesetzt..
Siehe auch Bug 280692 für weitere Details.
Spezifikationen
Spezifikation | Status | Kommentar |
---|---|---|
DOM Die Definition von 'Document.createElement' in dieser Spezifikation. |
Lebender Standard |
Browser-Kompatibiltät
BCD tables only load in the browser
Siehe auch
Node.removeChild()
Node.replaceChild()
Node.appendChild()
Node.insertBefore()
(en-US)Node.hasChildNodes()
document.createElementNS()
— um die Namespace-URL explizit anzugeben.