Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

HTML | DOM replaceChild() Method

  • Last Updated : 26 Jul, 2019

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

Syntax:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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.




<!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
  • Internet Explorer
  • Firefox
  • Opera
  • Safari



My Personal Notes arrow_drop_up
Recommended Articles
Page :