Web Services, Part VII: XML Object's Nodes and Types: Creating a New Element Node - Doc JavaScript

Web Services, Part VII: XML Object's Nodes and Types

Creating a New Element Node

The DOMDocument object exposes the CreateElement() method. Creating an element with this method is the same as creating a node with createNode() where the type is "element" and no namespace is specified. In order to create a namespace-qualified attribute, use the createNode() method. You can only set the name of the element with createElement(). Set the text property of the node to set the content of the element.

Notice that when you create the element object, it is not automatically connected to the current document's tree. Its ownerDocument property is equal to the document object, but its parentNode property is null. Use one of the three inserting methods to hook the new element object to the document tree: insertBefore(), replaceChild(), or appendChild().

The syntax of the method 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.

Next: How to create a new attribute node

Produced by Yehuda Shiran and Tomer Shiran
All Rights Reserved. Legal Notices.
Created: January 28, 2002
Revised: January 28, 2002

URL: https://www.webreference.com/js/column102/5.html