You are here: Reference > JavaScript > client-side > HTML DOM > methods > replaceChild

replaceChild method

Browser support:
Replaces the specified child element of the current element with a new element.
The element to be replaced must be an immediate child of the current element.
The removed child is no longer present in the document tree, but with the reference returned by the replaceChild method it can be inserted later into any element in the same document.


object.replaceChild (newChild, oldChild);
You can find the related objects in the Supported by objects section below.


Required. Reference to the element to insert.
Required. Reference to the child element of the current element to be replaced.

Return value:

Returns a reference to the removed element.

Example HTML code 1:

This example illustrates the use of the replaceChild method:
    <script type="text/javascript">
        function MakeFirst (button) {
            var container = document.getElementById ("container");
            var firstButton = container.getElementsByTagName ("button")[0];
            if (button != firstButton) {
                container.replaceChild (button, firstButton);
                container.insertBefore (firstButton, button.nextSibling);
    <div id="container">
        <button onclick="MakeFirst (this)" style="color:red">Make me the first</button>
        <button onclick="MakeFirst (this)" style="color:green">Make me the first</button>
        <button onclick="MakeFirst (this)" style="color:blue">Make me the first</button>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content