1. Home

XML DOM - Add Nodes

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

Add a Node - appendChild()

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

The new node is added (appended) after any existing child nodes.

Note: Use insertBefore() if the position of the node is important.

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

Example

newEle = xmlDoc.createElement("edition");

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

Example explained:

  • Suppose books.xml is loaded into xmlDoc
  • Create a new node <edition>
  • Append the node to the first <book> element

    • This code fragment does the same as above, but the new element is added with a value:

    Example

    newEle = xmlDoc.createElement("edition");
    newText=xmlDoc.createTextNode("first");
    newEle.appendChild(newText);

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

    Example explained:

  • Suppose books.xml is loaded into xmlDoc
  • Create a new node <edition>
  • Create a new text node "first"
  • Append the text node to the <edition> node
  • Append the <addition> node to the <book> element

    • Insert a Node - insertBefore()

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

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

    Example

    newNode = xmlDoc.createElement("book");

    x = xmlDoc.documentElement;
    y = xmlDoc.getElementsByTagName("book")[3];

    x.insertBefore(newNode,y);

    Example explained:

  • Suppose books.xml is loaded into xmlDoc
  • Create a new element node <book>
  • Insert the new node in front of the last <book> element node

    • 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) will both append a new child node to x.

    Add a New Attribute

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

    Example

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

    Example explained:

  • Suppose books.xml has been loaded into xmlDoc
  • Set the value of the attribute "edition" to "first" for the first <book> element

    • There is no method called add Attribute()
    The setAttribute() will create a new attribute if the attribute does not exist.

    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 begin inserting characters (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:

    Example

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

    Categories

    HTML CSS3 Bootstrap Foundation Sass JavaScript TypeScript JQuery AngularJS React NodeJS Highcharts PHP Python Python3 Django Linux Docker Ruby Java C C ++ Perl Servlet JSP Lua Scala Go ASP C # SQL MySQL SQLite MongoDB Redis Android Swift ionic Kotlin XML tutorial

    Contact US