In order to access this site you need to enable JavaScript!

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.

Use the insertBefore or the appendChild method to insert it into the same document.
If you want to insert the removed node into another document, use the adoptNode or importNode method.

Syntax:

object.replaceChild (newChild, oldChild);

You can find the related objects in the Supported by objects section below.

Parameters:

newChild

Required. Reference to the element to insert.

oldChild

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:

<head>
    <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);
            }
        }
    </script>
</head>
<body>
    <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>
    </div>
</body>