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 des erstellten Elements ist mit dem Wert von tagName initialisiert. Benutze keine qualifizierten Namen (wie "html:a") mit dieser Methode.
optionen Optional
Ein optionales ElementCreationOptions-Objekt, welches eine einzige Eigenschaft namens is besitzt, deren Wert der Name des Tags f├╝r ein benutzerdefiniertes Element ist. Dieses benutzerdefinierte Element muss vorher mit customElements.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, 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 wie createElement("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 die  HTMLSpanElement Schnittstelle, wenn das Argument "bgsounds", "multicol", oder "image" ist. Stattdessen wird HTMLUnknownElement f├╝r"bgsound" und "multicol" verwendet, und HTMLElement 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 und namespaceURI werden beim erstellten Element nicht auf null gesetzt.. Siehe auch  Bug 280692 f├╝r weitere Details.

Spezifikationen

Browser-Kompatibilt├Ąt

BCD tables only load in the browser

Siehe auch