THE WORLD'S LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

XML DOM replaceChild() Method


Node Object Reference Node Object

Example

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

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
        myFunction(xhttp);
    }
};
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("A Notebook");

    // 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("demo").innerHTML = txt;
}

The output of the code above will be:

A Notebook
Harry Potter
XQuery Kick Start
Learning XML
Try it Yourself »

Definition and Usage

The replaceChild() method replaces a child node with a new node.

The new node could be an existing node in the document, or you can create a new node.

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


Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The replaceChild() method is supported in all major browsers.


Syntax

nodeObject.replaceChild(newchild,oldchild)

Parameters

Parameter Type Description
newchild Node object Required. The new node to put in the child list
oldchild Node object Required. The node that will be replaced in the child list

Return Value

Type Description
Node object The replaced node (oldchild)

Technical Details

DOM Version Core Level 1 Node Object. Modified in DOM Level 3

Node Object Reference Node Object