To replace a specified node, we can use the replaceChild() method, while text in a text node can be replaced by the nodeValue property.
Replace an Element Node:
Replacing a node is possible with the replaceChild() method.
Books.xml:
<?xml version="1.0" encoding="UTF-8"?> <bookstore> <book category="Child"> <title lang="en">ABC</title> <author>Author Name</author> <year>2020</year> <price>100.00</price> </book> <book category="IT"> <title lang="en">XQuery Book</title> <author>Author 1</author> <author>Author 2</author> <author>Author 3</author> <author>Author 4</author> <year>2005</year> <price>350.00</price> </book> </bookstore> |
Example:
<!DOCTYPE html> <html> <body> <p id="hello"></p> <script> var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myFunction(this); } }; xhttp.open("GET", "books.xml", true); xhttp.send(); function myFunction(xml) { var x, y, z, i, newNode, newTitle, newText, xmlDoc, txt; xmlDoc = xml.responseXML; txt = ""; x = xmlDoc.documentElement; // Create a book element, title element and a text node newNode = xmlDoc.createElement("book"); newTitle = xmlDoc.createElement("title"); newText = xmlDoc.createTextNode("Alphabet"); // Add a 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 book node x.replaceChild(newNode, y); z = xmlDoc.getElementsByTagName("title"); // Output all titles for (i = 0; i < z.length; i++) { txt += z[i].childNodes[0].nodeValue + "<br>"; } document.getElementById("hello").innerHTML = txt; } </script> </body> </html> |
Explanation:
In the above example, we are replacing the first <book> element, for which we are loading “books.xml” in the xmlDoc. After creating a new element node <book>, a new element node <title>, and a new text node with the text “A Notebook”, we will append the new text node to the new element node <title>, the new element node <title> to the new element node <book> and will replace the first <book> element node with the new <book> element node.
Replace Data In a Text Node:
We can replace data in a text node using the replaceData() method having three parameters:
- offset – It is used to specify the value to begin replacing characters. Its value starts at zero.
- length – It is used to specify the number of characters to replace.
- string – It is used to specify the string to insert.
Example:
<!DOCTYPE html> <html> <body> <p id="hello"></p> <script> var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myFunction(this); } }; xhttp.open("GET", "books.xml", true); xhttp.send(); function myFunction(xml) { var xmlDoc = xml.responseXML; var x = xmlDoc.getElementsByTagName("title")[0].childNodes[0]; document.getElementById("hello").innerHTML = x.nodeValue; x.replaceData(1, 2, "lphabet"); document.getElementById("hello").innerHTML += "<br>" + x.nodeValue; } </script> </body> </html> |
Explanation:
In the above example, we are loading “books.xml” in the xmlDoc to get the text node of the first <title> element node. We are then replacing the eight first characters from the text node using the replaceData method.
Use of nodeValue Property:
Using the nodeValue property, we can easily replace the data in a text node.
Example:
<!DOCTYPE html> <html> <body> <p id="hello"></p> <script> var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myFunction(this); } }; xhttp.open("GET", "books.xml", true); xhttp.send(); function myFunction(xml) { var x, xmlDoc, txt; xmlDoc = xml.responseXML; x = xmlDoc.getElementsByTagName("title")[0].childNodes[0]; txt = x.nodeValue + "<br>"; x.nodeValue="Alphabet"; txt += x.nodeValue; document.getElementById("hello").innerHTML = txt } </script> </body> </html> |
Explanation:
In the above example, we will replace the text node value in the first <title> element. We will first load “books.xml” in the xmlDoc to get the text node of the first <title> element node. We will then change the text of the text node using the nodeValue property.