Node: insertBefore() method
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
TheinsertBefore() method of theNode interfaceinserts a node before areference node as a child of a specifiedparent node.
If the given node already exists in the document,insertBefore() moves it from its current position to the new position.(That is, it will automatically be removed from its existing parentbefore appending it to the specified new parent.)
This means that a node cannot be in two locations of the document simultaneously.
Note:TheNode.cloneNode() can be used to make a copyof the node before appending it under the new parent. Note that the copies made withcloneNode() will not be automatically kept in sync.
If the given child is aDocumentFragment, the entire contents of theDocumentFragment are moved into the child list of the specified parentnode.
Syntax
insertBefore(newNode, referenceNode)Parameters
newNodeThe node to be inserted.
referenceNodeThe node before which
newNodeis inserted. If this isnull, thennewNodeis inserted at the end ofnode's child nodes.Note:
referenceNodeisnot an optional parameter.You must explicitly pass aNodeornull.Failing to provide it or passing invalid values maybehavedifferently in different browser versions.
Return value
Returns the added child (unlessnewNode is aDocumentFragment,in which case the emptyDocumentFragment is returned).
Exceptions
Pre-insert validity
Example
Example 1
<div> <span>foo bar</span></div>// Create the new node to insertconst newNode = document.createElement("span");// Get a reference to the parent nodeconst parentDiv = document.getElementById("childElement").parentNode;// Begin test case [ 1 ] : Existing childElement (all works correctly)let sp2 = document.getElementById("childElement");parentDiv.insertBefore(newNode, sp2);// End test case [ 1 ]// Begin test case [ 2 ] : childElement is of Type undefinedsp2 = undefined; // Non-existent node of id "childElement"parentDiv.insertBefore(newNode, sp2); // Implicit dynamic cast to type Node// End test case [ 2 ]// Begin test case [ 3 ] : childElement is of Type "undefined" (string)sp2 = "undefined"; // Non-existent node of id "childElement"parentDiv.insertBefore(newNode, sp2); // Generates "Type Error: Invalid Argument"// End test case [ 3 ]Example 2
<div> <span>foo bar</span></div>// Create a new, plain <span> elementconst sp1 = document.createElement("span");// Get the reference elementconst sp2 = document.getElementById("childElement");// Get the parent elementconst parentDiv = sp2.parentNode;// Insert the new element into before sp2parentDiv.insertBefore(sp1, sp2);Note:There is noinsertAfter() method.It can be emulated by combining theinsertBefore methodwithNode.nextSibling.
In the previous example,sp1 could be inserted aftersp2 using:
parentDiv.insertBefore(sp1, sp2.nextSibling);Ifsp2 does not have a next sibling, then it must be the last child —sp2.nextSibling returnsnull, andsp1 is insertedat the end of the child node list (immediately aftersp2).
Example 3
Insert an element before the first child element, using thefirstChild property.
// Get the parent elementconst parentElement = document.getElementById("parentElement");// Get the parent's first childconst theFirstChild = parentElement.firstChild;// Create a new elementconst newElement = document.createElement("div");// Insert the new element before the first childparentElement.insertBefore(newElement, theFirstChild);When the element does not have a first child, thenfirstChild isnull. 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 newly inserted element is theonly element.
Specifications
| Specification |
|---|
| DOM # dom-node-insertbefore |