XML DOM | Clone Node

XML DOM - Clone Node


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

The clone node operation is used to create a duplicate copy of the specified node. The cloneNode() method is used to perform this operation.

The cloneNode() Method

The cloneNode() method returns a copy or duplicate of the specified node, i.e, it serves as generic copy constructor for nodes. The duplicate node has no parent (parentNode is null) and no user data.


Syntax

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

Node cloneNode(boolean deep)

Where,

  • deep if true, recursively clones the subtree under the specified node; if false, clones only the node itself (and its attributes, if it is an Element).
  • This method returns the duplicate node.

Example

The below example is used to parse an xml document (node.xml) into XML DOM object, and produces a copy of the first Employee element -

<!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('Employee')[0];
         clone_node = x.cloneNode(true);
         xmlDoc.documentElement.appendChild(clone_node);

         firstname = xmlDoc.getElementsByTagName("FirstName");
         lastname = xmlDoc.getElementsByTagName("LastName");
	 contact = xmlDoc.getElementsByTagName("ContactNo");
	 email = xmlDoc.getElementsByTagName("Email");
         for (i = 0;i < firstname.length;i++) {
            document.write(firstname[i].childNodes[0].nodeValue+'  
               '+lastname[i].childNodes[0].nodeValue+',  
               '+contact[i].childNodes[0].nodeValue+',  '+email[i].childNodes[0].nodeValue);
            document.write("<br>");
         }
      </script>
   </body>
</html>

Output

Save file as clonenode_example.html on the server's path (this file and node.xml should be on the same path in your server). This gives us the following output below -

Kennedy Nkpara, 1234567890, kennedynkpara@xyz.com
Stephanie Francis, 1234667898, stephaniefrancis@xyz.com
Justice Dauglas, 1234562350, justicedauglas@xyz.com
Kennedy Nkpara, 1234567890, kennedynkpara@xyz.com

From the output above, you will notice that the first Employee element is cloned/copied completely.


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 Node Object.

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.