XML DOM Add Nodes

Examples

In the examples below, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Add a node to the end of a node list
This example uses createElement() to create a new element, and appendChild() to add it to a node list.

Add a node before a specific node
This example uses createElement() to create a new element, and insertBefore() to insert it before a specific node.

Set a new attribute and attribute value
This example uses the setAttribute() method to set a new attribute/attribute value.

Insert data into a text node
This example uses insertData() to insert data into a text node.

Add a Node to The End of a Node List

The appendChild() method is used to add a node after the last child of a specific node.

This method is useful when the position of the added node is not important.

The following code fragment creates an element (<edition>), and adds it after the last child of each <book> element:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book');
var newel,newtext

for (i=0;i<x.length;i++)
  {
  newel=xmlDoc.createElement('edition');
  newtext=xmlDoc.createTextNode('First');
  newel.appendChild(newtext);
  x[i].appendChild(newel);
  }

Insert a Node Before a Specific Node

The insertBefore() method is used to insert a node before a specific node.

This method is useful when the position of the added node is important.

The following code fragment creates a new <book> element and inserts it before the last <book> element:

//check if last child node is an element node
function get_lastchild(n)
{
var x=n.lastChild;
while (x.nodeType!=1)
  {
  x=x.previousSibling;
  }
return x;
}

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.documentElement;

var newNode=xmlDoc.createElement("book");
var newTitle=xmlDoc.createElement("title");
var newText=xmlDoc.createTextNode("A Notebook");

newTitle.appendChild(newText);
newNode.appendChild(newTitle);

x.insertBefore(newNode,get_lastchild(x));

Note: Internet Explorer will skip white-space text nodes that are generated between nodes (e.g. new-line characters), while Mozilla will not. So, in the example above, the get_lastchild() function checks the node type of the last child node of the parameter.

Element nodes has a nodeType of 1, so if not the last child of the node in the parameter is an element node, it moves to the previous node, and checks if this node is an element node. This continues until the last child node (which must be an element node) is found. This way, the result will be correct in both Internet Explorer and Mozilla.

Set a New Attribute and Attribute Value

The setAttribute() method can be used to change the value of an existing attribute, or to create a new attribute/attribute value for an element.

The following code fragment adds a new attribute/attribute value to each <book> element:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("book");

for(i=0;i<x.length;i++)
  {
  x.item(i).setAttribute("edition","FIRST");
  }

Note: If the "edition" attribute already exists, the setAttribute() method will overwrite the attribute's value.

Insert Data Into a Text Node

The insertData() method is used to insert data into a text node.

The insertData() method has two parameters:

• offset - Where to begin inserting characters. Offset value starts at zero
• string - The string to insert

The following code fragment will add "Easy" to the text node of the first <title> element of the loaded XML:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];

x.insertData(0,"Easy ");

Jump to: Top of Page or HOME or Printer friendly page

W3Schools provides material for training only. We do not warrant the correctness of its contents. The risk from using it lies entirely with the user. While using this site, you agree to have read and accepted our terms of use and privacy policy.

Copyright 1999-2007 by Refsnes Data. All Rights Reserved.

W3Schools was converted to XHTML in December 1999