Document.createElementNS()
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. options
Optional- Das optionale Objekt
ElementCreationOptions
enthält eine einzelne Eigenschaft mit Namenis
, dessen Wert der Tag-Name eines zuvor mitcustomElements.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
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.