Document.createElementNS()

Erzeugt ein Element mit der angegebenen Namespace-URL und einem Namen.
 
Um ein Element zu definieren, ohne eine Namespace-URL anzugeben, verwenden Sie die Methode createElement.

Syntax

var element = document.createElementNS(namespaceURI, qualifiedName[, options]);

Parameter

namespaceURI
Ein String, der die mit dem Element verknüpfte Namespace-URL angibt. Die Eigenschaft namespaceURI des neu erstellten Elements wird mit dem Wert von namespaceURI initialisiert (siehe Gültige Namespace-URLs).
qualifiedName
Ein String, der den Namen des Elements angibt. Die Eigenschaft nodeName des neu erstellten Elements wird mit dem Wert von qualifiedName initialisiert.
optionsOptional
Das optionale Objekt ElementCreationOptions enthält eine einzelne Eigenschaft mit Namen  is, dessen Wert der Tag-Name eines zuvor mit customElements.define() definierten angepassten Elements ist. Aus Gründen der Abwärtskompatibilität erlauben einige Browser hier auch die Übergabe eines Strings mit dem Taf-Namen (s. Custom Elements specification). Siehe Extending native HTML elements für weitere Informationen zur Verwendung dieses Parameters.
Das neue Element erhält ein Attribut mit Namen is dessen Wert den Tag-Namen des Elements enthält. Angepasste Elemente sind ein experimentelles Feature, das nich in allen Browsern verfügbar ist.

Rückgabewert

Das neu erstelle Element.

Gültige Namespace-URLs

  • HTML - http://www.w3.org/1999/xhtml
  • SVG - http://www.w3.org/2000/svg
  • XBL - http://www.mozilla.org/xbl
  • XUL - http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul

Beispiel

Dies erstellt ein neues Element vom Typ <div> im XHTML-Namespace und fügt es dem vbox-Element hinzu. Obwohl dies kein besonders sinnvolles XUL-Document ist, demonstriert es die Verwendung von Elementen verschiedener Namespaces innerhalb eines Dokuments:

<?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="text/javascript"><![CDATA[
 var container;
 var newdiv;
 var txtnode;

 function init(){
   container = document.getElementById("ContainerBox");
   newdiv = document.createElementNS("http://www.w3.org/1999/xhtml","div");
   txtnode = document.createTextNode("This is text that was constructed dynamically with createElementNS and createTextNode then inserted into the document using appendChild.");
   newdiv.appendChild(txtnode);
   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>

Das obige Beispiel verwendet ein Inline-Skript, was für XHTML-Dokumente nicht empfohlen wird. Dieses Beispiel ist eigentlich ein XUL-Dokument mit eingebettetem XHTML. Nichts desto trotz bleibt die Empfehlung bestehen.

Spezifikationen

Spezigikation Status Kpmmentar
DOM
Die Definition von 'Document.createElement' in dieser Spezifikation.		 Lebender Standard  

Browser-Kompatibilität

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst! (en-US)

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Ja) (Ja) (Ja) (Ja) (Ja) (Ja)
options argument (Ja)[1] Nicht unterstützt 50 (50)[2][3] ? ? ?
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support (Ja) (Ja) (Ja) (Ja) (Ja) (Ja)

[1] In vorangegangenen Versionen dieser Spezifikation war dieses Argument ein einfacher String, dessen Wert der Tag-Name eines angepassten Elements ist. Aus Gründen der Abwärtskompatibilität akzeptiert Chrome hier beide Formate

[2] Siehe [1] oben: Wie Chrome, akzeptiert hier auch Firefox einen String anstelle eines Objekts. Allerdings erst ab Version 51 aufwärts. In Version 50 muss  options ein Objekt sein.

[3] Um in Firefox mit angepassten Elementen zu experimentieren müssen die Einstellungen  dom.webcomponents.enabled und dom.webcomponents.customelements.enabled auf true gesetzt werden.

Siehe auch