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

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

The `applyElement` Method

The applyElement method connects a child to its target father, which has been stripped down from its existing children and father. When calling the applyElement method, the father node is specified as the method's parameter:

childObj.applyElement(fatherObj);

There are four differences between this method and the previous appendChild method:

The appendChild method operates on the father object and expects the child object as its parameter. The applyElement method, on the other hand, operates on the child object and expects the father object as a parameter.
The applyElement method strips the target father from its both existing children and existing father before connecting the new child. The appendChild method, on the other hand, does not touch its target father's family.
The applyElement method does not operate on text nodes. The appendChild method, on the other hand, does operate on both HTML tag nodes and text nodes.

Let's take the table example we presented earlier in this column. In the previous page we have assembled the table by establishing every father-child connection from a father to its child. Since the applyElement method strips the target father from its children and father, we have to assemble the table bottom up. In this way, we don't touch anything already built. We'll assemble the table by establishing child-to-father relationship wherever possible. Since the applyElement method strips the target father from its existing children, we can use this method to connect the target father's first child only. Other children will be added with the appendChild method. Here is the script that creates all TABLE's 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 bottom up. First, let's connect the six leaf cells of the tree which constitute the content of the table cells. These cells are text nodes and should be connected to their TD nodes. Since text nodes do not support the applyElement method, we use the appendChild method as in the previous page:

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

Now we need to establish the son-to-father relationship between the six TD nodes to their appropriate three TR nodes. Here we can starting mixing the applyElement method (for the first child) and the appendChild method (for all the other children):

returnValue = tr1td1Obj.applyElement(tr1Obj);
tr1Obj.appendChild(tr1td2Obj);
tr2td1Obj.applyElement(tr2Obj);
tr2Obj.appendChild(tr2td2Obj);
tr3td1Obj.applyElement(tr3Obj);
tr3Obj.appendChild(tr3td2Obj);

let's append the TBODY node to the TABLE node:

returnValue = tbodyObj.applyElement(tableObj);

Run this script and watch its output:

returnValue = [object]
returnValue.nodeName = TR
returnValue.firstChild = [object]
returnValue.firstChild.nodeName = TD
tr1Obj.childNodes.length = 2

We learn from this alert window that indeed there is a father-child relationship between the TR node and the TD node, and that the return value is the father object. You also see that the TR node has two children, one connected by the applyElement method and the other one by the appendChild method.

The next step is to connect the three TR nodes to the TBODY node:

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

Run this script and see for yourself that indeed we connected the three TR nodes:

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

For the sake of demonstrating the removal of old children, let's apply a non-TR node to the TBODY node (and remove it later):

tr1td1Obj.applyElement(tbodyObj);

Run this script and see that indeed the TD node is TBODY's only child:

tbodyObj.childNodes.length = 1
tbodyObj.firstChild.nodeName = TD

We now need to connect the TBODY node to the TABLE node:

tbodyObj.applyElement(tableObj);

The last task is to hook the TABLE node to the page's body. We cannot use the applyElement method to the body node because it disconnects it from the page (its father). We'll use the appendChild method as in the previous 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/appendfather.html

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

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

The applyElement Method

Find a programming school near you

The `applyElement` Method