The Document Object Model (DOM), Part 5: The insertBefore Method

The Document Object Model (DOM), Part 5 (7)

The `insertBefore` Method

The insertBefore method behaves similarly to the appendChild method, except that you can define before which object to insert the new object. The insertBefore method has two parameter: the child object and the brother object:

fatherObj.insertBefore(childObj, brotherObj)

Let's assemble the table in our previous page using the insertBefore method instead of the appendChild method. The insertBefore method enables us to assemble the DOM nodes in a reverse order. The tbodyObj, for example, has three children: tr1Obj, tr2Obj, and tr3Obj. With the appendChild method, we assemble them according to their order in the tree:

tbodyObj.insertBefore(tr1Obj);
tbodyObj.insertBefore(tr2Obj);
tbodyObj.insertBefore(tr3Obj);

With the insertBefore method, we can assemble them in a reverse order:

tbodyObj.insertBefore(tr3Obj);
tbodyObj.insertBefore(tr2Obj, tr3Obj);
tbodyObj.insertBefore(tr1Obj, tr2Obj);

Notice that we first add the last child, tr3Obj, then we add the second child, tr2Obj, and only then the first child, tr1Obj. For each inserted child, we specify before which child it has to be added. For example, the second child, tr2Obj, is added to a tree that already includes the third child, tr3Obj, and is positioned in front of tr3Obj:

tbodyObj.insertBefore(tr2Obj, tr3Obj);

Here is the full script from the previous page. The table is assembled here with the insertBefore method:

<HTML>
<HEAD>
<TITLE> DOM Demo </TITLE>
</HEAD>
<BODY ID="bodyNode">
<SCRIPT LANGUAGE="JavaScript">
<!--
row1cell1Obj = document.createTextNode("This is row 1, cell 1");
tableObj = document.createElement("TABLE");
tbodyObj = document.createElement("TBODY");
tr1Obj = document.createElement("TR");
tr1td1Obj = document.createElement("TD");
tr1td2Obj = tr1td1Obj.cloneNode(false);
tr2td1Obj = tr1td1Obj.cloneNode(false);
tr2td2Obj = tr1td1Obj.cloneNode(false);
tr3td1Obj = tr1td1Obj.cloneNode(false);
tr3td2Obj = tr1td1Obj.cloneNode(false);
tr2Obj = tr1Obj.cloneNode(false);
tr3Obj = tr1Obj.cloneNode(false);
row1cell2Obj = row1cell1Obj.cloneNode(false);
row2cell1Obj = row1cell1Obj.cloneNode(false);
row2cell2Obj = row1cell1Obj.cloneNode(false);
row3cell1Obj = row1cell1Obj.cloneNode(false);
row3cell2Obj = row1cell1Obj.cloneNode(false);
row1cell2Obj.nodeValue = "This is row 1, cell 2";
row2cell1Obj.nodeValue = "This is row 2, cell 1";
row2cell2Obj.nodeValue = "This is row 2, cell 2";
row3cell1Obj.nodeValue = "This is row 3, cell 1";
row3cell2Obj.nodeValue = "This is row 3, cell 2";
returnValue = tableObj.insertBefore(tbodyObj);
tbodyObj.insertBefore(tr3Obj);
tbodyObj.insertBefore(tr2Obj, tr3Obj);
tbodyObj.insertBefore(tr1Obj, tr2Obj);
tr1Obj.insertBefore(tr1td2Obj);
tr1Obj.insertBefore(tr1td1Obj, tr1td2Obj);
tr2Obj.insertBefore(tr2td2Obj);
tr2Obj.insertBefore(tr2td1Obj, tr2td2Obj);
tr3Obj.insertBefore(tr3td2Obj);
tr3Obj.insertBefore(tr3td1Obj, tr3td2Obj);
tr1td2Obj.insertBefore(row1cell2Obj);
tr1td1Obj.insertBefore(row1cell1Obj);
tr2td2Obj.insertBefore(row2cell2Obj);
tr2td1Obj.insertBefore(row2cell1Obj);
tr3td2Obj.insertBefore(row3cell2Obj);
tr3td1Obj.insertBefore(row3cell1Obj);
bodyNode.insertBefore(tableObj);
// -->
</SCRIPT>
</BODY>
</HTML>

Click here and see that the table is identical to that assembled with the appendChild method. We have omitted the colors to make the script shorter and clearer.

Produced by Yehuda Shiran and Tomer Shiran

Created: July 19, 1999
Revised: September 17, 1999

URL: https://www.webreference.com/js/column44/insertbefore.html

The Document Object Model (DOM), Part 5: The insertBefore Method

The Document Object Model (DOM), Part 5 (7)

The insertBefore Method

Find a programming school near you

The `insertBefore` Method