home HOME

XML DOM Tutorial
DOM HOME
DOM Introduction
DOM Nodes
DOM Node Tree
DOM Node Access
DOM Node Info
DOM Node List
DOM Parsing
DOM Traverse Nodes
DOM Mozilla vs IE
DOM Navigate Nodes

Manipulate Nodes
DOM Get Nodes
DOM Set Nodes
DOM Remove Nodes
DOM Replace Nodes
DOM Create Nodes
DOM Add Nodes
DOM Clone Nodes

XML DOM Reference
DOM Node Types
DOM Node
DOM NodeList
DOM NamedNodeMap
DOM Document
DOM DocumentImpl
DOM DocumentType
DOM ProcessingInstr
DOM Element
DOM Attribute
DOM Text
DOM CDATA
DOM Comment
DOM HttpRequest
DOM ParseError

DOM Summary

Examples
DOM Examples
DOM Validator

Selected Reading
Web Statistics
Web Glossary
Web Hosting
Web Quality

W3Schools Forum

Helping W3Schools

pixels

XML DOM Replace Nodes

prev next

Examples

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

Replace a node in a nodelist
This example uses replaceChild() to replace the last child in a node list.

Replace data in a text node
This example uses replaceData() to replace data in a text node.


Replace a Node in a Node List

The replaceChild() method is used to replace a node in a node list.

The following code fragment creates a new <book> element that will replace 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;
//create a book element, title element and a text node
var newNode=xmlDoc.createElement("book");
var newTitle=xmlDoc.createElement("title");
var newText=xmlDoc.createTextNode("A Notebook");
//add the text node to the title node,
//and add the title node to the book node
newTitle.appendChild(newText);
newNode.appendChild(newTitle);
//replace the last node with the new node
x.replaceChild(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.


Replace Data In a Text Node

The replaceData() method is used to replace data in a text node.

The replaceData() method has three parameters:

  • offset - Where to begin replacing characters. Offset value starts at zero
  • length - How many characters to replace
  • string - The string to insert

The following code fragment will replace the eight first characters from the text node in the first <title> element with "Easy":

xmlDoc=loadXMLDoc("books.xml");
var x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
x.replaceData(0,8,"Easy");


prev next

Jump to: Top of Page or HOME or Printer Friendly 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.

Validate Validate W3C-WAI level A conformance icon W3Schools was converted to XHTML in December 1999