document.createElementNS

  • Revision slug: DOM/document.createElementNS
  • Revision title: document.createElementNS
  • Revision id: 73779
  • Created:
  • Creator: Sephr
  • Is current revision? No
  • Comment The html: prefix is pretty misleading. A friend thought this was required.; 2 words removed

Revision Content

{{ DomRef() }}

Summary

Creates an element with the specified namespace URI and qualified name.

Syntax

element = document.createElementNS(namespaceURI, qualifiedName);
  • element is the created element.
  • namespaceURI is a string that specifies the namespace URI to associate with the element. The namespaceURI property of the created element is initialized with the value of namespaceURI.
  • qualifiedName is a string that specifies the type of element to be created. The nodeName property of the created element is initialized with the value of qualifiedName.

Example

This creates a new <div> element in the XHTML namespace and appends it to the vbox element. Although this is not an extremely useful XUL document, it does demonstrate the use of elements from two different namespaces within a single document:

<?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>

Notes

The example given above uses inline script which is not recommended in XHTML documents. This particular example is actually an XUL document with embedded XHTML, however, the recommendation still applies. Inline script does not cause any problems for this short example, however, for any serious work you should learn about Properly Using CSS and JavaScript in XHTML Documents.

To create an element without specifying a namespace URI, use the createElement method.

See Also

document.createElement

document.createTextNode

element.namespaceURI

Specification

DOM 2 Core: createElementNS

Namespaces in XML

{{ languages( { "pl": "pl/DOM/document.createElementNS" } ) }}

Revision Source

<p>
{{ DomRef() }}
</p>
<h3 id="Summary" name="Summary"> Summary </h3>
<p>Creates an element with the specified namespace URI and qualified name.
</p>
<h3 id="Syntax" name="Syntax"> Syntax </h3>
<pre class="eval"><var>element</var> = <var>document</var>.createElementNS(<var>namespaceURI</var>, <var>qualifiedName</var>);
</pre>
<ul><li> <code>element</code> is the created <a href="en/DOM/element">element</a>.
</li><li> <code>namespaceURI</code> is a string that specifies the <a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/glossary.html#dt-namespaceURI">namespace URI</a> to associate with the element. The <a href="en/DOM/element.namespaceURI">namespaceURI</a> property of the created element is initialized with the value of <code>namespaceURI</code>.
</li><li> <code>qualifiedName</code> is a string that specifies the type of element to be created. The <a href="en/DOM/element.nodeName">nodeName</a> property of the created element is initialized with the value of <code>qualifiedName</code>.
</li></ul>
<h3 id="Example" name="Example">Example</h3>
<p>This creates a new &lt;div&gt; element in the <a href="/en/XHTML" title="en/XHTML">XHTML</a> namespace and appends it to the vbox element. Although this is not an extremely useful <a href="/en/XUL" title="en/XUL">XUL</a> document, it does demonstrate the use of elements from two different namespaces within a single document:</p>
<pre>&lt;?xml version="1.0"?&gt;
&lt;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()"&gt;

&lt;script type="text/javascript"&gt;&lt;![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);
 }

]]&gt;&lt;/script&gt;

 &lt;vbox id='ContainerBox' flex='1'&gt;
  &lt;html:div&gt;
   The script on this page will add dynamic content below:
  &lt;/html:div&gt;
 &lt;/vbox&gt;

&lt;/page&gt;
</pre><h3 id="Notes" name="Notes">Notes</h3>
<p>The example given above uses inline script which is not recommended in XHTML documents. This particular example is actually an XUL document with embedded XHTML, however, the recommendation still applies. Inline script does not cause any problems for this short example, however, for any serious work you should learn about <a href="/en/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents" title="en/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents">Properly Using CSS and JavaScript in XHTML Documents</a>.</p>
<p>To create an element without specifying a namespace URI, use the <a href="/en/DOM/document.createElement" title="en/DOM/document.createElement">createElement</a> method.</p><h3 id="See_Also" name="See_Also"> See Also </h3>
<p><a href="en/DOM/document.createElement">document.createElement</a>
</p><p><a href="en/DOM/document.createTextNode">document.createTextNode</a>
</p><p><a href="en/DOM/element.namespaceURI">element.namespaceURI</a>
</p>
<h3 id="Specification" name="Specification"> Specification </h3>
<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-DocCrElNS">DOM 2 Core: createElementNS</a>
</p><p><a class="external" href="http://www.w3.org/TR/1999/REC-xml-names-19990114">Namespaces in XML</a>
</p>{{ languages( { "pl": "pl/DOM/document.createElementNS" } ) }}
Revert to this revision