XML DOM replaceChild() Method

Definition and Usage

replaceChild() Method replaces the child node with a new node.

The new node can be an existing node in the document or a newly created node.

Tip:The replaced child node can be inserted later into any element in the same document. Please use the insertBefore() or appendChild() method to insert it into the same document later, or use the adoptNode() or importNode() method to insert the replaced node into another document.

Syntax

nodeObject.replaceChild(newchild,oldchild)

Parameters

Technical Details

Example

The following code loads "books.xml" into xmlDoc and replaces the first <book> element:

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, a title element, and a text node
    newNode = xmlDoc.createElement("book");
    newTitle = xmlDoc.createElement("title");
    newText = xmlDoc.createTextNode("Hello World");
    // 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 a 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("demo").innerHTML = txt;
}

Try It Yourself

Browser Support

All mainstream browsers support replaceChild() Methods.