HTML DOM Subscript Object

HTML DOM replaceChild() Method

Last Updated : 15 Jun, 2023

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 accepts two parameters which are listed below:

newChild: It is the required parameter. It represents the new node that needs to be inserted.
oldChild: It is the required parameter. It represents the node that is replaced by a 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() {
            let doc = document.createTextNode("Quick sort");
            let list = document.getElementById("listitem").children[0];
            list.replaceChild(doc, list.childNodes[0]);
        }
    </script>
</body>
   
</html>

Output:

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

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

HTML DOM Subscript Object

V

Vishal Chaudhary 2

Improve

Article Tags :

Similar Reads

HTML DOM Small Object

The Small Object in HTML DOM is used to represent the HTML <small> element. The small element can be accessed by using the getElementById() method. Syntax: document.getElementById("id"); Where id is assigned to the <small> tag. Example 1: In this example, we will see the use of Small Obj

HTML DOM Mark Object

The Mark Object in HTML DOM is used to represent the HTML <mark> element. The Mark Object is new in HTML 5. The <mark> element can be accessed by using the getElementById() method. Syntax: document.getElementById("id") Where id is assigned to the <mark> tag. Note: This tag is not s

HTML DOM Textarea select() Method

The select() method in HTML DOM is used to select the entire content of the text area or in a <input> element that includes a text field. Syntax: textareaObject.select() Parameters: This method does not accept any parameters. Return Value: It does not return any value. Example: In this example

HTML DOM removeChild() Method

The HTML DOM removeChild() method is used to remove a specified child node of the given element. It returns the removed node as a node object or null if the node doesn't exist. Syntax: node.removeChild(child) Parameters: This method accepts a single parameter child which is mandatory. It represents

HTML DOM S Object

The S Object in HTML DOM is used to represent the HTML <s> element. This tag is used to specify that the text content is no longer correct or accurate. The <s> element can be accessed by using the getElementById() method. Syntax: document.getElementById("id"); Where id is assigned to the

HTML DOM Style direction Property

The Style direction property in HTML DOM is used to set or return the text direction of an element. Syntax: It is used to set the text direction.object.style.direction = "ltr|rtl|initial|inherit"It returns the text direction.object.style.direction Property Values: ltr: Specifies the direction as lef

HTML DOM Strong Object

The Strong Object in HTML DOM is used to represent the HTML <strong> element. This tag is used to show the importance of the text. The strong element can be accessed by using the getElementById() method. Syntax: document.getElementById("id") Where id is assigned to the <strong> tag. Exam

HTML DOM Underline Object

The DOM underline object is used to represent the HTML <u> element. The underline element is accessed by getElementById(). Syntax: document.getElementById("id"); Where 'id' is the ID assigned to the <u> tag. Example 1: In this example, we will use the DOM underline object. C/C++ Code

HTML DOM Kbd Object

The Kbd Object in HTML DOM is used to represent the HTML <kbd> element. The <kbd> tag is the phrase tag and is used to define the keyboard input. The text enclosed by the <kbd> tag is typically displayed in the browserâ€™s default monospace font. The <kbd> element can be access

HTML DOM Italic Object

The Italic Object in HTML DOM is used to represent the HTML <i> element. This tag is used to display the content in italic style. The <i> element can be accessed by using the getElementById() method. Syntax: document.getElementById("id"); Where id is assigned to the <i> tag. Exampl