Your Search Results

    insertBefore

    Summary

    Inserts the specified node before a reference element as a child of the current node.

    Syntax

    var insertedElement = parentElement.insertBefore(newElement, referenceElement);
    

    If referenceElement is null, newElement is inserted at the end of the list of child nodes.

    • insertedElement The node being inserted, that is newElement
    • parentElement The parent of the newly inserted node.
    • newElement The node to insert.
    • referenceElement The node before which newElement is inserted.

    Example

    <div id="parentElement">
      <span id="childElement">foo bar</span>
    </div>
    
    <script>
    // Create a new, plain <span> element
    var sp1 = document.createElement("span");
    
    // Get a reference to the element, before we want to insert the element
    var sp2 = document.getElementById("childElement");
    // Get a reference to the parent element
    var parentDiv = sp2.parentNode;
    
    // Insert the new element into the DOM before sp2
    parentDiv.insertBefore(sp1, sp2);
    </script>
    

    There is no insertAfter method. It can be emulated by combining the insertBefore method with nextSibling.

    In the previous example, sp1 could be inserted after sp2 using:

    parentDiv.insertBefore(sp1, sp2.nextSibling);

    If sp2 does not have a next sibling, then it must be the last child — sp2.nextSibling returns null, and sp1 is inserted at the end of the child node list (immediately after sp2).

    Example 2

    Insert an element before the first child element, using the firstChild property.

    // Get a reference to the element in which we want to insert a new node
    var parentElement = document.getElementById('parentElement');
    // Get a reference to the first child
    var theFirstChild = parentElement.firstChild;
    
    // Create a new element
    var newElement = document.createElement("div");
    
    // Insert the new element before the first child
    parentElement.insertBefore(newElement, theFirstChild);
    

    When the element does not have a first child, then firstChild is null. The element is still appended to the parent, after the last child. Since the parent element did not have a first child, it did not have a last child either. Consequently, the new element is the only element, after insertion.

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support 1.0 (Yes) (Yes) (Yes) (Yes)
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support ? ? ? ? ?

    Specification

    Document Tags and Contributors

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