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

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

The `appendChild` Method

The appendChild method establishes a father-child relationship between two nodes. If the father node has children already, the new child will be appended as the last one, and hence can be accessed via the lastChild method. When calling the appendChild, the child node is specified as the method's parameter:

fatherObj.appendChild(childObj);

Let's take the table example we presented earlier in this column. In the previous page we have created all required nodes:

<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();
tr2td1Obj = tr1td1Obj.cloneNode();
tr2td2Obj = tr1td1Obj.cloneNode();
tr3td1Obj = tr1td1Obj.cloneNode();
tr3td2Obj = tr1td1Obj.cloneNode();
tr2Obj = tr1Obj.cloneNode();
tr3Obj = tr1Obj.cloneNode();
row1cell2Obj = row1cell1Obj.cloneNode();
row2cell1Obj = row1cell1Obj.cloneNode();
row2cell2Obj = row1cell1Obj.cloneNode();
row3cell1Obj = row1cell1Obj.cloneNode();
row3cell2Obj = row1cell1Obj.cloneNode();
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";
 // -->
</SCRIPT>
</BODY>
</HTML>

Let's start assembling the table from top to bottom. First, let's append the TBODY node to the TABLE node:

returnValue = tableObj.appendChild(tbodyObj);

Run this script and see for yourself that:

returnValue = [object]
returnValue.nodeName = TBODY
returnValue.firstChild = null
tableObj.nodeName = TABLE
tableObj.firstChild.nodeName = TBODY

We learn from this alert window that indeed there is a father-child relationship between the TABLE node and the TBODY node, and that the return value is the child object. Let's add now the three rows of the table:

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

Run this script and see that:

tbodyObj.firstChild.nodeName = TR
tbodyObj.childNodes[1].nodeName = TR
tbodyObj.lastChild.nodeName = TR

For the sake of demonstrating the inserting order, let's append a non-TR node (and remove it later):

tbodyObj.appendChild(tr1td1Obj);

Run this script and see that indeed the TD node is the last one:

tbodyObj.firstChild.nodeName = TR
tbodyObj.childNodes[1].nodeName = TR
tbodyObj.childNodes[2].nodeName = TR
tbodyObj.lastChild.nodeName = TD

We now have three rows connected to the TBODY node which is connected to the TABLE node. Let's hook the six TD nodes to their appropriate rows:

tbodyObj.appendChild(tr1Obj);
tbodyObj.appendChild(tr2Obj);
tbodyObj.appendChild(tr3Obj);
tr1Obj.appendChild(tr1td1Obj);
tr1Obj.appendChild(tr1td2Obj);
tr2Obj.appendChild(tr2td1Obj);
tr2Obj.appendChild(tr2td2Obj);
tr3Obj.appendChild(tr3td1Obj);
tr3Obj.appendChild(tr3td2Obj);

Finally, we connect the text nodes to the TD nodes. The text nodes will end up as the leaf cells of the tree:

tr1td1Obj.appendChild(row1cell1Obj);
tr1td2Obj.appendChild(row1cell2Obj);
tr2td1Obj.appendChild(row2cell1Obj);
tr2td2Obj.appendChild(row2cell2Obj);
tr3td1Obj.appendChild(row3cell1Obj);
tr3td2Obj.appendChild(row3cell2Obj);

What's left now is to connect the table to the page body, making the table visible on the page:

bodyNode.appendChild(tableObj);

Run this script and see the outcome of this rather lengthy script that built the table from scratch. We have omitted the colors to make the script shorter and clearer.

Produced by Yehuda Shiran and Tomer Shiran

Created: July 19, 1999
Revised: July 19, 1999

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

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

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

The appendChild Method

Find a programming school near you

The `appendChild` Method