XML DOM Replace Nodes - W3spoint

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.

Please Share