JavaScript - createElementNS() method

revision:


Category : document

The createElementNS() method creates an element with the specified namespace URI and qualified name..

Syntax :

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

Parameters:

namespaceURI : 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 : a string that specifies the name of element to be created. The name property of the created element is initialized with the value of qualifiedName.

qoptions : optional. An optional "ElementCreationOptions" object containing a single property named "is", whose value is the tag name for a custom element previously defined using "customElements.define()"". For backwards compatibility with previous versions of the Custom Elements specification, some browsers will allow you to pass a string here instead of an object, where the string's value is the custom element's tag name. The new element will be given an "is" attribute whose value is the custom element's tag name. Custom elements are an experimental feature only available in some browsers.

Examples:

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

Practical examples

example:
code:
                    
                

example:
code:
                    
                

example:
code: