February 7, 2002 - Adding A Tag to An XML Tree | WebReference

February 7, 2002 - Adding A Tag to An XML Tree

Yehuda Shiran February 7, 2002
Adding A Tag to An XML Tree
Tips: February 2002

Yehuda Shiran, Ph.D.
Doc JavaScript

You create an element node with the createElement() method. Its syntax is:

  createElement(tagName)
where tagName is a string specifying the new tag name. This name will be echoed in the new node's nodeName property.

Let's look at an example. First, let's read our mydvd XML file:

  var xmlDoc = new ActiveXObject("Msxml2.DOMDocument");
  xmlDoc.async = false;
  xmlDoc.load("mydvd.xml");
Set the root node:

  root = xmlDoc.documentElement;
We want to add a new tag, preparedby. This tag will include the name of the person that prepared the sales report of the mydvd store. Creating the element is straightforward:

  newElem = xmlDoc.createElement("preparedby");
We need to decide now where to put the new tag. We decided to add it to the <summary> tag, which is the root's (<sales>'s) first child. We can append the new tag to <summary>'s tags. Here is the code:

  root.childNodes.item(0).appendChild(newElem);
We can assign a value to the new tag:

  root.childNodes.item(0).lastChild.text = "Yehuda Shiran";
The addElement() function summarizes the above:

  function addElement() {
    var xmlDoc = new ActiveXObject("Msxml2.DOMDocument");
    var root;
    var newElem;
    xmlDoc.async = false;
    xmlDoc.load("mydvd.xml");
    alert(xmlDoc.documentElement.xml);
    root = xmlDoc.documentElement;
    newElem = xmlDoc.createElement("preparedby");
    root.childNodes.item(0).appendChild(newElem);
    root.childNodes.item(0).lastChild.text = "Yehuda Shiran";
    alert(xmlDoc.documentElement.xml);
  }
Try it now. The first alert box echoed the XML file before adding the element node. The second alert box reflects the addition. Notice the preparedby tag, the fourth and last child of the <summary> tag.