XML DOM Add Nodes

Add Node - appendChild()

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

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

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

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

Example 1

newEle = xmlDoc.createElement("edition");
xmlDoc.getElementsByTagName("book")[0].appendChild(newEle);

Try It Yourself

Example explanation:

  1. Assuming books.xml has been loaded into xmlDoc
  2. Create a new node <edition>
  3. Append the node to the first <book> element

The following code has the same effect as the above, but the new element has added a value:

Example 2

newEle = xmlDoc.createElement("edition");
newText = xmlDoc.createTextNode("first edition");
newEle.appendChild(newText);
xmlDoc.getElementsByTagName("book")[0].appendChild(newEle);

Try It Yourself

Example explanation:

  1. Assuming books.xml has been loaded into xmlDoc
  2. Create a new node <edition>
  3. Create a new text node "First Edition"
  4. Append this text node to the <edition> node
  5. Append the <edition> node to the <book> element

Insert node - insertBefore()

insertBefore() The method inserts a node before the specified child node.

This method is very useful if the position of the node to be added is important:

Example

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

Try It Yourself

Example explanation:

  1. Assuming books.xml has been loaded into xmlDoc
  2. Create a new element node <book>
  3. Insert this new node before the last <book> element node
  4. 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) can append new child nodes to x.

Add new attribute

setAttribute() The method sets the value of the attribute.

If the attribute does not exist, setAttribute() The following methods can append new child nodes to x:

Example

xmlDoc.getElementsByTagName('book')[0].setAttribute("edition","First Edition");

Try It Yourself

Example explanation:

  1. Assuming books.xml has been loaded into xmlDoc
  2. Set the value of the "edition" attribute of the first <book> element to "First Edition"

Note:There is no method named addAttribute(). If the attribute does not exist, setAttribute() will create a new attribute. If the attribute already exists, the setAttribute() method will overwrite the existing value.

Add text to the text node - insertData()

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

insertData() The method has two parameters:

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

The following code snippet adds "My Favorite" to the text node of the first <title> element in the loaded XML:

Example

xmlDoc.getElementsByTagName("title")[0].childNodes[0].insertData(0,"My Favorite");

Try It Yourself