XML DOM | Create Node - WebDesignTutorialz

Hello folks! welcome back to a new edition of our tutorial on XML DOM. In this tutorial, we are going to be discussing about how to create new nodes using a few methods of the document object.

These methods provides a scope to create new element node, text node, CDATA section node, comment node and attribute node. If the newly created node already exists in the element object, it is replaced by the new one. The following sections illustrates this with examples.

Create new Element node

The createElement() method creates a new element node. If the newly created element node exists in the element object, then it is replaced by the new one.

Syntax

The following below is the syntax to use the createElement() method -

var_name = xmldoc.createElement("tagname");

Where,

var_name - is the user-defined variable name which holds the name of the new element.

("tagname") - is the name of the new element node to be created.

Example

The below example is used to parse an xml document (node.xml) into XML DOM object, and creates a new element node PhoneNo in the XML document -

<!DOCTYPE html>
<html>
   <head>
      <script>
         function loadXMLDoc(filename) {
            if (window.XMLHttpRequest) {
               xhttp = new XMLHttpRequest();
            } else // code for IE5 and IE6 {
               xhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhttp.open("GET",filename,false);
            xhttp.send();
            return xhttp.responseXML;
         }
      </script>
   </head>
   <body>
      <script>
         xmlDoc = loadXMLDoc("/dom/node.xml");

         new_element = xmlDoc.createElement("PhoneNo");

         x = xmlDoc.getElementsByTagName("FirstName")[0];
         x.appendChild(new_element);

         document.write(x.getElementsByTagName("PhoneNo")[0].nodeName);
      </script>
   </body>
</html>

new_element = xmlDoc.createElement("PhoneNo"); creates the new element node <PhoneNo>.

x.appendChild(new_element); x holds the name of the specified child node <FirstName> to which the new element node is appended.

Output

Now you have to save this file name as createnewelement_example.html on the server's path (this file and node.xml should be on the same path in your server). The output of the above example gives us the attribute value as PhoneNo.

READ: XML DOM | Traversing

Create new Text node

The createTextNode() method creates a new text node.

Syntax

The following below is the syntax to use the createTextNode() method -

var_name = xmldoc.createTextNode("tagname");

Where,

var_name - is the user-defined variable name which holds the name of new text node.

("tagname") - is the name of new text node to be created.

Example

The below example is used to parse an xml document (node.xml) into XML DOM object, and then create a new text node in the XML document -

<!DOCTYPE html>
<html>
   <head>
      <script>
         function loadXMLDoc(filename) {
            if (window.XMLHttpRequest) {
               xhttp = new XMLHttpRequest();
            } else // code for IE5 and IE6 {
               xhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhttp.open("GET",filename,false);
            xhttp.send();
            return xhttp.responseXML;
         }
      </script>
   </head>
   <body>
      <script>
         xmlDoc = loadXMLDoc("/dom/node.xml");

         create_e = xmlDoc.createElement("PhoneNo");
         create_t = xmlDoc.createTextNode("Im new text node");
         create_e.appendChild(create_t);

         x = xmlDoc.getElementsByTagName("Employee")[0];
         x.appendChild(create_e);


         document.write(" PhoneNO: ");
         document.write(x.getElementsByTagName("PhoneNo")[0].childNodes[0].nodeValue);
      </script>
    </body>
</html>

create_e = xmlDoc.createElement("PhoneNo"); creates the new element node <PhoneNo>.

create_t = xmlDoc.createTextNode("Im new text node") creates a new text node.

x.appendChild(create_e); the text node, "Im new text node" is appended to the element <PhoneNo>.

document.write(x.getElementByTagName("PhoneNo")[0].childNodes[0].nodeValue); writes the new text node value to the element <PhoneNo>

Output

Save file as createtextnode_example.html on the server's path (this file and node.xml should be on the same path in your server). The output of the above example gives us the attribute value, i.e, PhoneNo: Im new text node.

READ: XML DOM | Get Node

Create new Comment node

The createComment() method create a new comment node. Comment node is included in the program for the easy understanding of the code functionality.

Syntax

The following below is the syntax to use the createComment() method -

var_name = xmldoc.createComment("tagname");

Where,

var_name - is the user-defined variable name which holds the name of new comment node.

("tagname") - is the name of the new comment node to be created.

Example

The below example is used to parse an xml document (node.xml) into XML DOM object, and create a new comment node "Company is the parent node" in the XML document -

<!DOCTYPE html>
<html>
   <head>
      <script>
         function loadXMLDoc(filename) {
            if (window.XMLHttpRequest) {
               xhttp = new XMLHttpRequest();
            }
            else // code for IE5 and IE6 {
               xhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhttp.open("GET",filename,false);
            xhttp.send();
            return xhttp.responseXML;
         }
      </script>
   </head>
   <body>
      <script>
         xmlDoc = loadXMLDoc("/dom/node.xml");

         create_comment = xmlDoc.createComment("Company is the parent node");

         x = xmlDoc.getElementsByTagName("Company")[0];

         x.appendChild(create_comment);

         document.write(x.lastChild.nodeValue);
      </script>
   </body>
</html>

create_comment = xmlDoc.createComment("Company is the parent node") creates a specified comment line.

x.appendChild(create_comment); In this line, 'x' holds the name of the element <Company> to which the comment line is appended.

Output

Now you have to save this file name as createcommentnode_example.html on the server's path (this file and node.xml should be on the same path in your server). The output of the above example gives us the attribute value as Company is the parent node.

Create New CDATA Section Node

The createCDATASection() method is used to create a new CDATA section node. If the newly created CDATA section node exists in the element object, it is replaced by the new one.

Syntax

The following below is the syntax to use the createCDATASection() method -

var_name = xmldoc.createCDATASection("tagname");

Where,

var_name - is the user-defined variable name which holds the name of new CDATA section node.

("tagname") - is the name of the new CDATA section node to be created.

Example

The below example is used to parse an xml document (node.xml) into XML DOM object, and creates a new CDATA section "Create CDATA Example" in the XML document -

<!DOCTYPE html>
<html>
   <head>
      <script>
         function loadXMLDoc(filename) {
            if (window.XMLHttpRequest) {
               xhttp = new XMLHttpRequest();
            }
            else // code for IE5 and IE6 {
               xhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhttp.open("GET",filename,false);
            xhttp.send();
            return xhttp.responseXML;
         }
      </script>
   </head>
   <body>
      <script>
         xmlDoc = loadXMLDoc("/dom/node.xml");

         create_CDATA = xmlDoc.createCDATASection("Create CDATA Example");

         x = xmlDoc.getElementsByTagName("Employee")[0];
         x.appendChild(create_CDATA);
         document.write(x.lastChild.nodeValue);
      </script>
   </body>
</html>

create_CDATA = xmlDoc.createCDATASection("Create CDATA Example") creates a new CDATA section node, "Create CDATA Example".

x.appendChild(create_CDATA); In this line, 'x' holds the specified element <Employee> indexed at 0 to which the CDATA node value is appended.

Output

Save file as createcdatanode_example.html on the server's path (this file and node.xml should be on the same path in your server). The output of the above example gives the attribute value as Create CDATA Example.

READ: XML DOM | Accessing

Create new Attribute node

The setAttributeNode() method is used for creating a new attribute node. If the newly created attribute node exists in the element object, it is replaced by the new one.

Syntax

The following below is the syntax to use the createAttributeNode() method -

var_name = xmldoc.createAttributeNode("tagname");

Where,

var_name - is the user-defined variable name which holds the name of new attribute node.

("tagname") - is the name of the new attribute node to be created.

Example

The below example is used to parse an xml document (node.xml) into XML DOM object, and creates a new attribute node section in the XML document -

<!DOCTYPE html>
<html>
   <head>
      <script>
         function loadXMLDoc(filename) {
            if (window.XMLHttpRequest) {
               xhttp = new XMLHttpRequest();
            } else // code for IE5 and IE6 {
               xhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhttp.open("GET",filename,false);
            xhttp.send();
            return xhttp.responseXML;
         }
      </script>
   </head>
   <body>
      <script>
         xmlDoc = loadXMLDoc("/dom/node.xml");

         create_a = xmlDoc.createAttribute("section");
         create_a.nodeValue = "A";

         x = xmlDoc.getElementsByTagName("Employee");
         x[0].setAttributeNode(create_a);
         document.write("New Attribute: ");
         document.write(x[0].getAttribute("section"));

      </script>
   </body>
</html>

create_a = xmlDoc.createAttribute("Category") creates an attribute with the name <section>.

create_a.nodeValue="Management" creates the value "A" for the attribute <section>

x[0].setAttributeNode(create_a); this attribute value is set to the node element <Employee> indexed at 0.

READ: XML DOM | Set Node

Alright guys! This is where we are going to be rounding up for this tutorial post. In our next tutorial, we are going to be discussing about XML DOM Add Node.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.

WebDesignTutorialz

XML DOM | Create Node

Create new Element node

Syntax

Example

Output

Create new Text node

Syntax

Example

Output

Create new Comment node

Syntax

Example

Output

Create New CDATA Section Node

Syntax

Example

Output

Create new Attribute node

Syntax

Example

Post a Comment

Get new posts by email:

Python Tkinter Colors

Html Layout

Python Tkinter Relief Styles

WordPress Optimization Tips Tutorial

Html-Comments