Document.createElement()

Springen zu:
  1. Syntax
  2. Beispiele
  3. Notizen
  4. Spezifikationen
  5. Browser-Kompatibiltät
  6. Siehe auch

Diese Übersetzung ist in Arbeit.

 

In einem HTML Dokument erstellt die Document.createElement() Methode ein spezifiziertes HTML Element oder ein HTMLUnknownElement wenn der gegebene Elementname ein unbekannter ist.

Notiz: In einem XUL Dokument erstellt diese Methode das spezifizierte XUL Element. In anderen Dokumenten erstellt sie ein Element mit einer Namensraum URL von null.

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

Spezifikation Status Kommentar
DOM
Die Definition von 'Document.createElement' in dieser Spezifikation.		 Lebender Standard  

Browser-Kompatibiltät

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidiOS SafariSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung JaEdge Vollständige Unterstützung JaFirefox Vollständige Unterstützung Ja
Hinweise
Vollständige Unterstützung Ja
Hinweise
Hinweise Doesn't conform to the DOM spec for XUL and XHTML documents: localName and namespaceURI are not set to null on the created element.
IE Vollständige Unterstützung JaOpera Vollständige Unterstützung JaSafari Vollständige Unterstützung JaWebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaEdge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung JaOpera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung JaSamsung Internet Android ?
options parameterChrome Vollständige Unterstützung Ja
Hinweise
Vollständige Unterstützung Ja
Hinweise
Hinweise For backwards compatibility, the options argument can be an object or a string with the custom element tag name, although the string version is deprecated.
Edge ? Firefox Vollständige Unterstützung 50
Hinweise
Vollständige Unterstützung 50
Hinweise
Hinweise Firefox accepts a string instead of an object here, but only from version 51 onwards. In version 50, options must be an object.
IE ? Opera Vollständige Unterstützung Ja
Hinweise
Vollständige Unterstützung Ja
Hinweise
Hinweise For backwards compatibility, the options argument can be an object or a string with the custom element tag name, although the string version is deprecated.
Safari ? WebView Android Vollständige Unterstützung Ja
Hinweise
Vollständige Unterstützung Ja
Hinweise
Hinweise For backwards compatibility, the options argument can be an object or a string with the custom element tag name, although the string version is deprecated.
Chrome Android Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise For backwards compatibility, the options argument can be an object or a string with the custom element tag name, although the string version is deprecated.
Edge Mobile ? Firefox Android Vollständige Unterstützung 50
Hinweise
Vollständige Unterstützung 50
Hinweise
Hinweise Firefox accepts a string instead of an object here, but only from version 51 onwards. In version 50, options must be an object.
Opera Android Vollständige Unterstützung Ja
Hinweise
Vollständige Unterstützung Ja
Hinweise
Hinweise For backwards compatibility, the options argument can be an object or a string with the custom element tag name, although the string version is deprecated.
Safari iOS ? Samsung Internet Android ?

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.

Siehe auch

 

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
Mitwirkende an dieser Seite: Lyian, Johann150, jakobpack, StevenS77, Johann, fscholz, jsx, MikeSierra
Zuletzt aktualisiert von: Lyian,