XML DOM Add Node

Instance

The following examples use XML files books.xml.

Function loadXMLDoc()Located in external JavaScript, used to load XML files.

Add a node after the last child node
This example uses appendChild() to add a child node to an existing node.
Add a node before a specified child node
This example uses insertBefore() to insert a node before a specified child node.
Add a new attribute
This example uses setAttribute() to add a new attribute.
Add data to a text node
This example uses insertData() to insert data into an existing text node.

Add node - appendChild()

The appendChild() method adds a child node to an existing node.

The new node will be added (appended) after any existing child node.

Note:If the position of the node is very important, please use the insertBefore() method.

The following code snippet creates an element (<edition>) and appends it to the last child node of the first <book> element:

xmlDoc=loadXMLDoc("books.xml");
newel=xmlDoc.createElement("edition");
x=xmlDoc.getElementsByTagName("book")[0];
x.appendChild(newel);

Example Explanation:

  1. By using loadXMLDoc() Add "books.xmlLoad into xmlDoc
  2. Create a new node <edition>
  3. Append this node to the first <book> element

TIY

Loop and append an element to all <book> elements:TIY

Insert node - insertBefore()

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

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

xmlDoc=loadXMLDoc("books.xml");
newNode=xmlDoc.createElement("book");
x=xmlDoc.documentElement;
y=xmlDoc.getElementsByTagName("book")[3];
x.insertBefore(newNode, y);

Example Explanation:

  1. By using loadXMLDoc() Add "books.xmlLoad into xmlDoc
  2. Create a new element node <book>
  3. Insert this node before the last <book> element node

TIY

If the second parameter of insertBefore() is null, the new node will be added after the last existing child node.

x.insertBefore(newNode, null) and x.appendChild(newNode) All can append a new child node to x.

Add a new attribute

The addAtribute() method does not exist.

If the attribute does not exist, setAttribute() can create a new attribute:

xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName('book');
x[0].setAttribute("edition","first");

Example Explanation:

  1. By using loadXMLDoc() Add "books.xmlLoad into xmlDoc
  2. Set (create) the value of the "edition" attribute of the first <book> element to "first"

TIY

Note:If the attribute already exists, the setAttribute() method will overwrite the existing value.

Add text to a text node - insertData()

The insertData() method inserts data into an existing text node.

The insertData() method has two parameters:

  • offset - Where to start inserting characters (starting from 0)
  • string - The string to be inserted

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

xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
x.insertData(0,"Hello ");

TIY