HTML | DOM replaceChild() Method
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:
After click on the button:
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
Please Login to comment...