XML DOM | Add Node

XML DOM - Add Node


Hello folks! welcome back to a new section of our tutorial on XML DOM. In this tutorial post, we will be discussing about the nodes to the existing element.

The nodes to the existing element provides a means to -

  • append new child nodes before or after the existing child nodes.
  • insert data within the text node.
  • add attribute node.

The following methods below can be used to add/append the nodes to an element in a DOM -

  • appendChild()
  • insertBefore()
  • insertData()


appendChild() Method

The appendChild() method adds the new child node after the existing child node.

Syntax

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

Node appendChild(Node newChild) throws DOMException

Where,

  • newChild is the node to add.
  • This method returns the Node added.

Example

The below example is used to parse an xml document (node.xml) into XML DOM object, and appends the new child PhoneNo to the element <FirstName> -

<!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");

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

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

  • The createElement() method creates a new element PhoneNo.
  • The new element PhoneNo is added to the element FirstName using the appendChild() method.

Output

Save this file as appendchildnode_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.


insertBefore() Method

The insertBefore() method is used to insert the new child nodes before the specified child nodes

Syntax

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

Node insertBefore(Node newChild, Node refChild) throws DOMException

Where,

  • newChild is the node to add.
  • refChild is the reference node, i.e, the node before which the new node must be added.
  • This method returns the Node added.

Example

The below example is used to parse an xml document (node.xml) into XML DOM object, and inserts the new child Email before the specified element <Email> -

<!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("Email");

         x = xmlDoc.documentElement;
         y = xmlDoc.getElementsByTagName("Email");

         document.write("No of Email elements before inserting was: " + y.length);
         document.write("<br>");
         x.insertBefore(create_e,y[3]);

         y=xmlDoc.getElementsByTagName("Email");
         document.write("No of Email elements after inserting is: " + y.length);
      </script>
   </body>
</html>

  • The createElement() method creates a new element Email.
  • The new element Email is added before the element Email using the inserBefore() method.
  • y.length gives the total number of elements added before and after the new element.

Output

Save this file as insertnodebefore_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 is as follows -

No of Email elements before inserting was: 3
No of Email elements after inserting is: 4 


insertData() Method

The insertData() method inserts a string at the specified 16-bit unit offset.

Syntax

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

void insertData(int offset, java.lang.String arg) throws DOMException

Where,

  • offset is the character offset at which to insert.
  • arg is the keyword to insert the data. It enclosed the two parameters offset and string within the parenthesis separated by comma.

Example

The below example is used to parse an xml document (node.xml) into XML DOM object, and insert the new data MiddleName at the specified position to the element FirstName -

<!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");

        x = xmlDoc.getElementsByTagName("FirstName")[0].childNodes[0];
        document.write(x.nodeValue);
        x.insertData(6,"MiddleName");
        document.write("<br>");
        document.write(x.nodeValue);

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

Output

Save this file as addtext_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 is as follows -

Kennedy
KennedyMiddleName 


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 Replace 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.