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 des Document Interfaces erstellt ein neues Element mit dem angegebenen Namensraum-URI und qualifiziertem Namen.

Dies ist nützlich in Dokumenten mit gemischten Namensräumen, wie SVG oder MathML eingebettet in HTML, 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 mit dem Element verknüpft werden soll. 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. Der Präfix ist optional, aber wenn er angegeben wird, muss auch der namespaceURI Parameter angegeben werden. Wenn der Präfix auf xml oder xmlns gesetzt ist, muss der namespaceURI auf http://www.w3.org/XML/1998/namespace oder http://www.w3.org/2000/xmlns/, bzw. gesetzt sein.

Der Wert wird verwendet, um die prefix Eigenschaft des neuen Elements zu initialisieren. Standardwert ist null.

localName

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

options Optional

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

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

Aus Gründen der Abwärtskompatibilität erlauben es einige Browser, hier einen String anstelle eines Objekts zu übergeben, wobei der Wert des Strings der Tag-Name des benutzerdefinierten Elements ist. Siehe Erweitern nativer HTML-Elemente für weitere Informationen zur Verwendung dieses Parameters.

Rückgabewert

Das neue Element.

Ausnahmen

NamespaceError DOMException

Wird ausgelöst, wenn der Wert von namespaceURI ist:

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

InvalidCharacterError DOMException

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

Der prefix muss mindestens ein Zeichen haben und darf kein ASCII-Leerzeichen, NULL, / oder > (U+0000, U+002F oder U+003E, entsprechend) enthalten.
Der localName ist ein gültiger Elementname, wenn er eine Mindestlänge von 1 hat und:
- er mit einem Alphabet-Zeichen beginnt und kein ASCII-Leerzeichen, NULL, /, oder > (U+0000, U+002F oder U+003E, entsprechend) enthält.
- er beginnt mit : (U+003A), _ (U+005F) oder einem der Zeichen im Bereich U+0080 bis U+10FFFF (einschließlich) und die verbleibenden Codepunkte nur diese selben Zeichen zusammen mit den ASCII-alphanumerischen Zeichen, - (U+002D), und . (U+002E) enthalten,

Hinweis: Frühere Versionen der Spezifikation waren restriktiver und forderten, 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 Nutzung

Dies zeigt, wie Sie ein neues <div> Element im XHTML-Namensraum erstellen.

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 es dem HTML <body> Element anhängen können.

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

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