Dokument: createElementNS()-Methode

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Die createElementNS()-Methode der Document-Schnittstelle erstellt ein neues Element mit dem angegebenen Namensraum-URI und qualifiziertem Namen.

Dies ist nützlich in Dokumenten mit gemischtem Namensraum, wie SVG oder MathML, die in HTML eingebettet sind, wo der Parser den Namensraum nicht zuverlässig ableiten kann.

Die createElement()-Methode ist einfacher, wenn Sie ein einfaches HTML-Element erstellen möchten.

Syntax

createElementNS(namespaceURI, qualifiedName)
createElementNS(namespaceURI, qualifiedName, options)

Parameter

namespaceURI

Ein String, der den namespaceURI angibt, der dem Element zugeordnet wird. Einige wichtige Namensraum-URIs sind:

HTML: http://www.w3.org/1999/xhtml
SVG: http://www.w3.org/2000/svg
MathML: http://www.w3.org/1998/Math/MathML

qualifiedName

Ein String, der den qualifizierten Namen des neuen Elements enthält. Die nodeName-Eigenschaft des erstellten Elements wird mit diesem Wert initialisiert.

Das Format des qualifizierten Namens ist prefix:localName oder localName, wobei die Teile wie folgt definiert sind:

prefix Optional

Ein "kurzes Alias" für den Namensraum. Das Präfix ist optional, aber wenn es angegeben wird, muss auch der namespaceURI-Parameter angegeben werden. Wenn das Präfix auf xml oder xmlns gesetzt ist, muss namespaceURI auf http://www.w3.org/XML/1998/namespace oder http://www.w3.org/2000/xmlns/ gesetzt werden, beziehungsweise.

Der Wert wird verwendet, um die neue prefix-Eigenschaft des Elements zu initialisieren. Standardmäßig auf null gesetzt.

localName

Der lokale Name des Elements. Der Wert wird verwendet, um die neue localName-Eigenschaft des Elements zu initialisieren.

options Optional

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

is Optional: Ein String, der den Tag-Namen für ein zuvor definiertes benutzerdefiniertes Element mittels customElements.define() definiert. Das neue Element erhält ein is-Attribut, dessen Wert der Tag-Name des benutzerdefinierten Elements ist.
customElementRegistry Optional: Ein CustomElementRegistry, das das spezifische Register für benutzerdefinierte Elemente eines benutzerdefinierten Elements festlegt.

Aus Gründen der Rückwärtskompatibilität erlauben einige Browser, hier einen String statt eines Objekts zu übergeben, wobei der Wert des Strings der Tag-Name des benutzerdefinierten Elements ist. Weitere Informationen zur Verwendung dieses Parameters finden Sie unter Erweiterung von nativen HTML-Elementen.

Rückgabewert

Das neue Element.

Ausnahmen

NamespaceError DOMException

Wird ausgelöst, wenn der namespaceURI-Wert:

kein gültiger Namensraum-URI ist.
auf den leeren String gesetzt ist, wenn prefix einen Wert hat.
nicht der Wert http://www.w3.org/XML/1998/namespace oder http://www.w3.org/2000/xmlns/ ist, wenn prefix auf xml oder xmlns gesetzt ist, beziehungsweise.

InvalidCharacterError DOMException

Wird ausgelöst, wenn entweder das prefix oder localName nicht gültig ist:

Das prefix muss mindestens ein Zeichen enthalten und darf keine ASCII-Leerzeichen, NULL, /, oder > (U+0000, U+002F, oder U+003E, beziehungsweise) enthalten.
Das localName ist ein gültiger Elementname, wenn es eine Mindestlänge von 1 hat und:
- es mit einem alphabetischen Zeichen beginnt und keine ASCII-Leerzeichen, NULL, /, oder > (U+0000, U+002F, oder U+003E, beziehungsweise) enthält.
- es mit : (U+003A), _ (U+005F), oder einem Zeichen im Bereich U+0080 bis U+10FFFF (einschließlich) beginnt und die verbleibenden Codepunkte nur diese gleichen Zeichen sowie die ASCII-alphanumerischen Zeichen, - (U+002D), und . (U+002E) umfassen,

Hinweis: Frühere Versionen der Spezifikation waren restriktiver und verlangten, dass der qualifiedName ein gültiger XML-Name ist.

NotSupportedError DOMException

Wird ausgelöst, wenn sowohl die is- als auch die customElementRegistry-Optionen angegeben sind.

Beispiele

Grundlegende Verwendung

Dies zeigt, wie man ein neues <div>-Element im XHTML-Namensraum erstellt.

const divElementXHTML = document.createElementNS(
  "http://www.w3.org/1999/xhtml",
  "div",
);

// This is equivalent!
const divElementHTML = document.createElement("div");

Erstellen eines SVG-Elements

Dieses Beispiel zeigt, wie Sie ein SVG-Element (SVGSVGElement) erstellen und an das HTML-<body>-Element anhängen können.

Die Verwendung von createElementNS() mit dem SVG-Namespace ist notwendig, wenn Sie mit einem HTML-Dokument arbeiten. Wenn Sie createElement("svg") aufrufen würden, würde ein HTMLUnknownElement zurückgegeben und das SVG nicht gerendert.

const svgNS = "http://www.w3.org/2000/svg";

const svg = document.createElementNS(svgNS, "svg");
svg.setAttribute("width", "100");
svg.setAttribute("height", "100");

const circle = document.createElementNS(svgNS, "circle");
circle.setAttribute("cx", "50");
circle.setAttribute("cy", "50");
circle.setAttribute("r", "40");
circle.setAttribute("fill", "steelblue");

svg.appendChild(circle);
document.body.appendChild(svg);

Spezifikationen

Spezifikation
DOM # ref-for-dom-document-createelementns①

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden