HTML DOM Events Event Objects (Event Objects)

JS DOM reference manual

replaceChild()HTML DOM replaceChild() method

The method replaces a child node with a new node in the given parent node.

The new node can be an existing node in the document or a newly created node.useThe method removes a child node from the parent node.

Syntax:

node.replaceChild(newNode, oldNode)

Example

var newElem = document.querySelector("p");
var div = document.getElementById("demo");
div.replaceChild(newElem, div.firstElementChild);

Test See </›

Browser compatibility

All browsers fully support the replaceChild() method:

Method
replaceChild()	Is	Is	Is	Is	Is

Parameter value

Parameter	Description
newNode	The node object you want to insert
oldNode	The node object you want to delete

Technical details

Return value:	A Node object representing the node to be replaced
DOM Version:	DOM Level1

More Examples

Create a new node and replace it with an existing node:

Example

var newElem = document.createElement("h"2");
var newContent = document.createTextNode("Hi there and greetings!");
newElem.appendChild(newContent);
var div = document.getElementById("demo");
div.replaceChild(newElem, div.firstElementChild);

Test See </›

Related References

HTML DOM Reference:node .parentNode() method

HTML DOM Reference:node .hasChildNodes() method

HTML DOM Reference:node .appendChild() method

HTML DOM Reference:node .insertBefore() method

HTML DOM Reference:node .removeChild() method

HTML DOM Element Object