Dokument: 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.

* Some parts of this feature may have varying levels of support.

In einem HTML-Dokument erstellt die document.createElement() Methode das durch localName spezifizierte HTML-Element oder ein HTMLUnknownElement, wenn localName nicht erkannt wird.

Syntax

js
createElement(localName)
createElement(localName, options)

Parameter

localName

Ein String, der den Typ des zu erstellenden Elements angibt. Verwenden Sie keine qualifizierten Namen (wie "html:a") mit dieser Methode. Wenn die Methode auf einem HTML-Dokument aufgerufen wird, wandelt createElement() localName in Kleinbuchstaben um, bevor das Element erstellt wird. In Firefox, Opera und Chrome funktioniert createElement(null) wie createElement("null").

options Optional

Ein Objekt mit den folgenden Eigenschaften:

is

Der Tag-Name eines benutzerdefinierten Elements, das zuvor über customElements.define() definiert wurde. Siehe Webkomponenten-Beispiel für weitere Details.

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

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

js
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 Einschränkungen zur Implementierungsrealität von benutzerdefinierten eingebauten Elementen.

Das folgende Beispiel-Snippet stammt aus unserem expanding-list-web-component Beispiel (siehe es auch live). In diesem Fall erweitert unser benutzerdefiniertes Element das HTMLUListElement, das das <ul> Element repräsentiert.

js
// 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 eine Instanz dieses Elements programmatisch erstellen wollten, würden wir einen Aufruf wie folgt verwenden:

js
let expandingList = document.createElement("ul", { is: "expanding-list" });

Dem neuen Element wird ein is Attribut zugewiesen, dessen Wert der Tag-Name des benutzerdefinierten Elements ist.

Hinweis: Für die Rückwärtskompatibilität mit früheren Versionen der Custom Elements Spezifikation erlauben einige Browser, dass Sie hier einen String anstelle eines Objekts übergeben, wobei der Wert des Strings der Tag-Name des benutzerdefinierten Elements ist.

Spezifikationen

Specification
DOM
# ref-for-dom-document-createelement①

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch