Skip to content
Related Articles

Related Articles

HTML | DOM replaceChild() Method

View Discussion
Improve Article
Save Article
  • Last Updated : 10 Aug, 2022
View Discussion
Improve Article
Save Article

The replaceChild() method in HTML DOM is used to replace a child node with a new node within the given parent node. 

Syntax:

parentNode.replaceChild( newChild, oldChild )

Parameter Values: This method accept two parameters which are listed below:

  • newChild: It is the required parameter. It represents the new node which need to be inserted.
  • oldChild: It is the required parameter. It represents the node which is replaced by new node.

Return Value: It returns a node object which represents the replaced node. 

Example: In this example the first <li> text is replaced with the new text. 

HTML




<!DOCTYPE html>
<html>
<head>
    <title>DOM replaceChild() Method</title>
</head>
 
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <h2>
        DOM replaceChild() Method
    </h2>
     
<p>Sorting Algorithm</p>
 
    <ul id="listitem">
        <li>Insertion sort</li>
        <li>Merge sort</li>
        <li>Bubble sort</li>
    </ul>
 
    <button onclick="Geeks()">
        Click Here!
    </button>
    <script>
        function Geeks() {
            var doc = document.createTextNode("Quick sort");
            var list = document.getElementById("listitem").childNodes[0];
            list.replaceChild(doc, list.childNodes[0]);
        }
    </script>
</body>
</html>


Output: 

Before click on the button:

 replaceChild 

After click on the button:

 replaceChild 

Supported Browsers: The browser supported by DOM replaceChild() method method are listed below:

  • Google Chrome 1
  • Edge 12
  • Internet Explorer 6
  • Firefox 1
  • Opera 7
  • Safari 1.1

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!