Dokument: createElement() Methode

Baseline Weitgehend verfgbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Gerten und in vielen Browserversionen. Sie ist seit Juli 2015 browserbergreifend verfgbar.

* Einige Teile dieser Funktion werden mglicherweise unterschiedlich gut untersttzt.

Mehr erfahren
Vollstndige Kompatibilitt anzeigen

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

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

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

options Optional

Ein Objekt mit den folgenden optionalen Eigenschaften (beachten Sie, dass nur eine von is und customElementRegistry festgelegt werden kann):

is Optional: Ein String, der den Tag-Namen fr ein benutzerdefiniertes Element definiert, das zuvor mit customElements.define() definiert wurde. Dem neuen Element wird ein is Attribut zugewiesen, dessen Wert der Tag-Name des benutzerdefinierten Elements ist. Siehe Web-Komponent Beispiel fr mehr Details.
customElementRegistry Optional: Ein CustomElementRegistry, das das Scope-bezogene benutzerdefinierte Element-Registrierung eines benutzerdefinierten Elements festlegt.

Rckgabewert

Das neue Element.

Hinweis: Ein neues HTMLElement wird zurckgegeben, wenn das Dokument ein HTMLDocument ist, was der hufigste Fall ist. Andernfalls wird ein neues Element zurckgegeben.

Ausnahmen

InvalidCharacterError DOMException

Wird ausgelst, wenn der localName Wert kein gltiger Elementname ist. Ein String ist ein gltiger Elementname, wenn seine Lnge mindestens 1 betrgt und:

er mit einem alphabetischen Zeichen beginnt und kein ASCII-Leerzeichen, NULL, / oder > (U+0000, U+002F, or U+003E, jeweils) enthlt.
er mit : (U+003A), _ (U+005F) oder einem beliebigen Zeichen im Bereich von U+0080 bis U+10FFFF (einschlielich) beginnt und die verbleibenden Codepunkte nur dieselben Zeichen zusammen mit den ASCII-Alphanumerischen Zeichen, - (U+002D) und . (U+002E) enthalten.

Hinweis: Frhere Versionen der Spezifikation waren restriktiver und erforderten, dass der localName ein gltiger XML-Name war.

NotSupportedError DOMException

Wird ausgelst, wenn sowohl die Optionen is als auch customElementRegistry angegeben sind.

Beispiele

Einfaches Beispiel

Dies erstellt ein neues <div> und fgt 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

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

Ergebnis

Web-Komponent Beispiel

Hinweis: berprfen Sie den Abschnitt Browser-Kompatibilitt fr Untersttzung und den Verweis auf das is Attribut fr Vorbehalte zur Implementierung von benutzerdefinierten eingebauten Elementen.

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

// 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 programmgesteuert erstellen mchten, wrden wir einen Aufruf in der folgenden Art und Weise verwenden:

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: Aus Grnden der Abwrtskompatibilitt erlauben einige Browser hier die bergabe eines Strings anstelle eines Objekts, wobei der Wert des Strings der Tag-Name des benutzerdefinierten Elements ist.

Spezifikationen

Spezifikation
DOM # ref-for-dom-document-createelement

Browser-Kompatibilitt

Siehe auch

Node.removeChild()
Node.replaceChild()
Node.appendChild()
Node.insertBefore()
Node.hasChildNodes()
document.createElementNS() um die Namespace-URI fr das Element explizit anzugeben.

Help improve MDN

War diese bersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen knnen Diese Seite wurde automatisch aus dem Englischen bersetzt.

bersetzung auf GitHub anzeigen Fehler mit dieser bersetzung melden