DOM replacement node
XML DOM Replace node
replaceChild() method replaces the specified node.
nodeValue property replaces the text in a text node.
Try it - ExampleThe following example uses the XML file books .xml.
Function loadXMLDoc(), located in external JavaScript, is used to load XML files.
Replace element node
This example uses replaceChild() to replace the first <book> node.
Replace the data in the text node
This example uses the nodeValue attribute to replace the data in the text node.
Replace element node
replaceChild() method is used to replace nodes.
The following code snippet replaces the first <book> element:
Example
<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js">
</script>
</head>
<body>
<script>
xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.documentElement;
//create a book element, title element and a text node
newNode=xmlDoc.createElement("book");
newTitle=xmlDoc.createElement("title");
newText=xmlDoc.createTextNode("A Notebook");
//add the text node to the title node,
newTitle.appendChild(newText);
//add the title node to the book node
newNode.appendChild(newTitle);
y=xmlDoc.getElementsByTagName("book")[0]
//replace the first book node with the new node
x.replaceChild(newNode,y);
z=xmlDoc.getElementsByTagName("title");
for (i=0;i<z.length;i++)
{
document.write(z[i].childNodes[0].nodeValue);
document.write("<br>");
}
</script>
</body>
</html>Run Example»
Click the "Run Example" button to view the online example
Explanation of the example:
Use loadXMLDoc() to load "books.xml" In xmlDoc
Create a new element node<book>
Create a new element node<title>
Create a new text node with the text "A Notebook"
Append this new text node to the new element node <title>
Append this new element node <title> to the new element node <book>
- ##Replace the first <book> element node with New<book> element node
Replace the data in the text nodeThereplaceData() method is used to replace the data in the text node. The replaceData() method has three parameters:
- offset - where to start replacing characters. offset values start with 0.
- length - how many characters to replace
- string - the string to insert
<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js">
</script>
</head>
<body>
<script>
xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
document.write(x.nodeValue);
x.replaceData(0,8,"Easy");
document.write("<br>");
document.write(x.nodeValue);
</script>
</body>
</html>Run Instance»Click the "Run Instance" button to view the online instance
Explanation of examples:
Use loadXMLDoc() to load "books.xml" into xmlDoc
Get the first < title> Text node of the element node
Use the replaceData method to replace the first 8 characters of the text node with "Easy"
Use the nodeValue attribute instead
It is easier to replace data in text nodes with the nodeValue attribute.
The following code snippet will replace the text node value in the first <title> element with "Easy Italian":
Example
<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js">
</script>
</head>
<body>
<script>
xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
document.write(x.nodeValue);
x.nodeValue="Easy Italian";
document.write("<br>");
document.write(x.nodeValue);
</script>
</body>
</html>Run instance»
Click the "Run instance" button to view the online instance
Explanation of the instance:
Use loadXMLDoc() Load "books.xml" into xmlDoc
Get the text node of the first <title> element node
Use the nodeValue property to change the text of this text node
You can read more about changing node values in the chapter Changing Nodes.
