XML DOM replaceChild() Method
❮ 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 (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("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
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
