Document.createElement() — Methode · JavaScript-Referenz

Signatur

createElement(localName) / createElement(localName, options)

Beschreibung

Die Methode createElement() der Schnittstelle Document erstellt ein neues HTMLElement, das den angegebenen localName hat.

Wenn localName nicht erkannt wird, erstellt die Methode ein HTMLUnknownElement.

Parameter

Name	Typ	Default	Beschreibung
$localName Pflicht	string	—	Ein String, der den Typ des zu erstellenden Elements angibt. Verwenden Sie mit dieser Methode keine qualifizierten Namen (wie "html:a"). Wenn `createElement()` auf einem HTML-Dokument aufgerufen wird, konvertiert es `localName` vor der Erstellung des Elements in Kleinbuchstaben. In Firefox, Opera und Chrome funktioniert `createElement(null)` wie `createElement("null")`.
$options	Object	—	Ein Objekt mit den folgenden optionalen Eigenschaften (beachten Sie, dass nur eine der Eigenschaften `is` und `customElementRegistry` gesetzt werden darf): `is` (optional): Ein String, der den Tag-Namen für ein benutzerdefiniertes Element definiert, das zuvor mit `customElements.define()` definiert wurde. Das neue Element erhält ein `is`-Attribut, dessen Wert der Tag-Name des benutzerdefinierten Elements ist. `customElementRegistry` (optional): Ein `CustomElementRegistry`, das die Scoped custom element registry eines benutzerdefinierten Elements festlegt.

Rückgabewert

Typ

Element

Beschreibung

Das neue Element. 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

Grundlegendes Beispiel – JavaScript

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);
}

addElement();

Web-Component-Beispiel – Definition

// 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" });

Web-Component-Beispiel – Instanziierung

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

// Wichtig · Fallstricke

Ausnahme InvalidCharacterError (DOMException): Wird ausgelöst, wenn der Wert von localName kein gültiger Elementname ist. Ein String ist ein gültiger Elementname, wenn seine Länge mindestens 1 beträgt und: er mit einem Alphabet-Zeichen beginnt und kein ASCII-Whitespace, NULL, / oder > (U+0000, U+002F bzw. U+003E) enthält; oder er mit : (U+003A), _ (U+005F) oder einem beliebigen Zeichen im Bereich U+0080 bis U+10FFFF (einschließlich) beginnt und die verbleibenden Codepunkte nur diese Zeichen zusammen mit ASCII-alphanumerischen Zeichen, - (U+002D) und . (U+002E) enthalten. Frühere Versionen der Spezifikation waren restriktiver und verlangten, dass der localName ein gültiger XML-Name ist. Ausnahme NotSupportedError (DOMException): Wird ausgelöst, wenn sowohl die Optionen is als auch customElementRegistry angegeben sind. Aus Gründen der Abwärtskompatibilität erlauben einige Browser, hier einen String anstelle eines Objekts zu übergeben, wobei der Wert des Strings der Tag-Name des benutzerdefinierten Elements ist.

Siehe auch

Node.removeChild() Node.replaceChild() Node.appendChild() Node.insertBefore() Node.hasChildNodes() Document.createElementNS() Document.createTouchList()