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:

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: