XML DOM | Replace Node

XML DOM - Replace Node


Hello folks! welcome back to a new section of our tutorial on XML DOM. In this tutorial guide, we are going to be discussing about the replace node operation in an XML DOM object.

As we have already explained in our former tutorials, everything in Dom is maintained in a hierarchical informational units known as node and the replacing node gives another way to update these specified nodes or text node.


The following below are the two methods to replace the nodes -

  • replaceChild() Method
  • replaceData() Method

The replaceChild() Method

The replaceChild() method can replace the specified node with the new node.

Syntax

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

Node replaceChild(Node newChild, Node oldChild) throws DOMException

Where,

  • newChild is the new node to put in the child list.
  • oldChild is the node being replaced in the list.
  • This method returns the node replaced.

Example

The below example is used to parse an xml document (node.xml) into XML DOM object, and replaces the stated node <FirstName> with the new node <Name> -

<!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.documentElement;

         z = xmlDoc.getElementsByTagName("FirstName");
         document.write("<b>Content of FirstName element before replace operation</b><br>");
         for (i=0;i<z.length;i++) {
            document.write(z[i].childNodes[0].nodeValue);
            document.write("<br>");
         }
         //create a Employee element, FirstName element and a text node
         newNode = xmlDoc.createElement("Employee");
         newTitle = xmlDoc.createElement("Name");
         newText = xmlDoc.createTextNode("MS Dhoni");

         //add the text node to the title node,
         newTitle.appendChild(newText);
         //add the title node to the book node
         newNode.appendChild(newTitle);

         y = xmlDoc.getElementsByTagName("Employee")[0]
         //replace the first book node with the new node
         x.replaceChild(newNode,y);

         z = xmlDoc.getElementsByTagName("FirstName");
         document.write("<b>Content of FirstName element after replace operation</b><br>");
         for (i = 0;i<z.length;i++) {
            document.write(z[i].childNodes[0].nodeValue);
            document.write("<br>");
         }
      </script>
   </body>
</html>

Output

Save this file as replacenode_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 following -

Content of FirstName element before replace operation
Kennedy
Stephanie
Justice

Content of FirstName element after replace operation
Stephanie
Justice


The replaceData() Method

The replaceData() method can replace the characters beginning at the specified 16-bit unit offset with the specified string.

Syntax

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

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

Where,

  • offset is the offset from which to start replacing.
  • count is the number of 16-bit units to replace. If the sum of offset and count exceeds length, then all the 16-bit units to the end of the data are replaced.
  • arg is the DOMString with which the range must be replaced.

Example

The below example is used to parse an xml document (node.xml) into XML DOM object, and replaces it -

<!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("ContactNo")[0].childNodes[0];
         document.write("<b>ContactNo before replace operation:</b> "+x.nodeValue);
         x.replaceData(1,5,"9999999");
         document.write("<br>");
         document.write("<b>ContactNo after replace operation:</b> "+x.nodeValue);

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

Output

Save this file as replacedata_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 following -

ContactNo before replace operation: 1234567890

ContactNo after replace operation: 199999997890 


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