Dokumentation: createElementNS()-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.

Erstellt ein Element mit der angegebenen Namespace-URI und dem qualifizierten Namen.

Um ein Element zu erstellen, ohne eine Namespace-URI anzugeben, verwenden Sie die Methode createElement().

Syntax

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

Parameter

namespaceURI

Ein String, der die namespaceURI angibt, die mit dem Element verknüpft werden soll. Einige wichtige Namespace-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 Typ des zu erstellenden Elements angibt. Die nodeName-Eigenschaft des erstellten Elements wird mit dem Wert von qualifiedName initialisiert.

options Optional

Ein optionales ElementCreationOptions-Objekt, das eine einzelne Eigenschaft namens is enthält, deren Wert der Tag-Name eines benutzerdefinierten Elements ist, das zuvor mit customElements.define() definiert wurde. Aus Gründen der Abwärtskompatibilität mit früheren Versionen der Custom Elements-Spezifikation 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 Nutzung dieses Parameters.

Das neue Element erhält ein is-Attribut, dessen Wert der Tag-Name des benutzerdefinierten Elements ist. Benutzerdefinierte Elemente sind ein experimentelles Feature, das nur in einigen Browsern verfügbar ist.

Rückgabewert

Das neue Element.

Ausnahmen

NamespaceError DOMException

Wird ausgelöst, wenn der Wert von namespaceURI keine gültige Namespace-URI ist.

InvalidCharacterError DOMException

Wird ausgelöst, wenn der Wert von qualifiedName kein gültiger XML-Name ist; zum Beispiel, wenn er mit einer Zahl, einem Bindestrich oder einem Punkt beginnt oder Zeichen enthält, die nicht alphanumerisch, Unterstriche, Bindestriche oder Punkte sind.

Beispiele

Dies erstellt ein neues <div>-Element im XHTML-Namespace und hängt es an das vbox-Element an. Obwohl dies kein besonders nützliches XUL-Dokument ist, demonstriert es die Verwendung von Elementen aus zwei verschiedenen Namespaces innerhalb eines einzigen Dokuments:

xml
<?xml version="1.0"?>
<page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
      xmlns:html="http://www.w3.org/1999/xhtml"
      title="||Working with elements||"
      onload="init()">

<script type="application/javascript"><![CDATA[
 let container;
 let newDiv;
 let textNode;

 function init(){
   container = document.getElementById("ContainerBox");
   newDiv = document.createElementNS("http://www.w3.org/1999/xhtml", "div");
   textNode = document.createTextNode("This is text that was constructed dynamically with createElementNS and createTextNode then inserted into the document using appendChild.");
   newDiv.appendChild(textNode);
   container.appendChild(newDiv);
 }

]]></script>

 <vbox id="ContainerBox" flex="1">
  <html:div>
   The script on this page will add dynamic content below:
  </html:div>
 </vbox>

</page>

Hinweis: Das oben gezeigte Beispiel verwendet inline Script, was in XHTML-Dokumenten nicht empfohlen wird. Dieses spezifische Beispiel ist tatsächlich ein XUL-Dokument mit eingebettetem XHTML, jedoch gilt die Empfehlung dennoch.

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch