The Node.insertBefore()
method inserts the specified node before a reference node as a child of the current node.
Syntax
var insertedNode = parentNode.insertBefore(newNode, referenceNode);
In Mozilla Firefox, if referenceNode
is null
, newNode
is inserted at the end of the list of child nodes. If the referenceNode
is of [ Type ]
"undefined"
( this kind of argument is String
) will be throw, in all of the browser ( IE, Chrome and Mozilla ) a "Type Error: Invalid Argument" since the the function insertBefore
accept as second argument a [ Type ] Node.
Example
<div id="parentElement"> <span id="childElement">foo bar</span> </div> <script> //Create the new node to insert var newNode = document.createElement("span"); //Get a reference to the parent node var parentDiv = document.getElementById("parentElement").parentNode; //Begin test case [ 1 ] : Exist a childElement --> All working correctly var sp2 = document.getElementById("childElement"); parentDiv.insertBefore(newNode,sp2); //End test case [ 1 ] //Begin test case [ 2 ] : childElement is of Type undefined var sp2 = undefined; //Not exist a 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 ) var sp2 = "undefined"; //Not exist a node of id "childElement" parentDiv.insertBefore(newNode,sp2); //Generate "Type Error: Invalid Argument" //End test case [ 3 ]
insertedNode
The node being inserted, that isnewNode
parentNode
The parent of the newly inserted node.newNode
The node to insert.referenceNode
The node before whichnewNode
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 | ? | ? | ? | ? | ? |