--- title: Document.createElement() slug: Web/API/Document/createElement tags: - API - DOM - Document - Method - Méthode translation_of: Web/API/Document/createElement ---
{{APIRef("DOM")}}

In einem HTML Dokument erstellt die Document.createElement() Methode ein spezifiziertes HTML Element oder ein {{domxref("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 {{domxref("Node.nodeName", "nodeName")}} des erstellten Elements ist mit dem Wert von tagName initialisiert. Benutze keine qualifizierten Namen (wie "html:a") mit dieser Methode.
optionen {{optional_inline}}
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 {{anch("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);
}

{{EmbedLiveSample("Basic_example", 500, 50)}}

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 {{domxref("HTMLUListElement")}}, welche das {{htmlelement("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

Spezifikationen

Spezifikation Status Kommentar
{{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}} {{Spec2('DOM WHATWG')}}

Browser-Kompatibiltät

{{Compat("api.Document.createElement")}}

Siehe auch