mozilla
Your Search Results

    element.replaceChild

    Summary

    Replaces one child node of the specified element with another.

    Syntax

    replacedNode = parentNode.replaceChild(newChild, oldChild);
    
    • newChild is the new node to replace oldChild. If it already exists in the DOM, it is first removed.
    • oldChild is the existing child to be replaced.
    • replacedNode is the replaced node. This is the same node as oldChild.

    Example

    // <div>
    //  <span id="childSpan">foo bar</span>
    // </div>
    
    // create an empty element node
    // without an ID, any attributes, or any content
    var sp1 = document.createElement("span");
    
    // give it an id attribute called 'newSpan'
    sp1.setAttribute("id", "newSpan");
    
    // create some content for the new element.
    var sp1_content = document.createTextNode("new replacement span element.");
    
    // apply that content to the new element
    sp1.appendChild(sp1_content);
    
    // build a reference to the existing node to be replaced
    var sp2 = document.getElementById("childSpan");
    var parentDiv = sp2.parentNode;
    
    // replace existing node sp2 with the new span element sp1
    parentDiv.replaceChild(sp1, sp2);
    
    // result:
    // <div>
    //   <span id="newSpan">new replacement span element.</span>
    // </div> 
    

    Specification

    See also

    Document Tags and Contributors

    Contributors to this page: Potappo
    Last updated by: Potappo,