Creating a Table: Using the insertBefore Method with DOM : DOM Content « Development « JavaScript DHTML






  1. JavaScript DHTML
  2. Development
  3. DOM Content

Creating a Table: Using the insertBefore Method with DOM


<HTML>
<HEAD>
<TITLE> Building tables using DOM </TITLE>
</HEAD>
<BODY ID="bodyNode">
<SCRIPT LANGUAGE="JavaScript">
<!--
row1column1Node = document.createTextNode("test");
tableElement = document.createElement("TABLE");
tableBodyElement = document.createElement("TBODY");
tr1Element = document.createElement("TR");
tr1td1 = document.createElement("TD");

tr1td2 = tr1td1.cloneNode(true);
tr2td1 = tr1td1.cloneNode(false);
tr2td2 = tr1td1.cloneNode(true);
tr3td1 = tr1td1.cloneNode(false);
tr3td2 = tr1td1.cloneNode(false);

tr2 = tr1Element.cloneNode(true);
tr3 = tr1Element.cloneNode(false);

row1column2 = row1column1Node.cloneNode(false);
row2column1 = row1column1Node.cloneNode(true);

row2column2 = row1column1Node.cloneNode(false);
row3column1 = row1column1Node.cloneNode(true);
row3column2 = row1column1Node.cloneNode(false);

row1column2.nodeValue = "A  ";
row2column1.nodeValue = "B  ";
row2column2.nodeValue = "C  ";
row3column1.nodeValue = "D  ";
row3column2.nodeValue = "E  ";

returnValue = tableElement.insertBefore(tableBodyElement);

tableBodyElement.insertBefore(tr3);
tableBodyElement.insertBefore(tr2, tr3);
tableBodyElement.insertBefore(tr1Element, tr2);

tr1Element.insertBefore(tr1td2);
tr1Element.insertBefore(tr1td1, tr1td2);

tr2.insertBefore(tr2td2);
tr2.insertBefore(tr2td1, tr2td2);
tr3.insertBefore(tr3td2);
tr3.insertBefore(tr3td1, tr3td2);

tr1td2.insertBefore(row1column2);
tr1td1.insertBefore(row1column1Node);
tr2td2.insertBefore(row2column2);
tr2td1.insertBefore(row2column1);
tr3td2.insertBefore(row3column2);
tr3td1.insertBefore(row3column1);

bodyNode.insertBefore(tableElement);
// -->
</SCRIPT>
</BODY>
</HTML>








Related examples in the same category

1.Define a NodeFilter function to accept only 'img' elements
2.CSS style sheet a 'window' visual effect
3.Check DOM Node object whether represents an HTML tag
4.If a DOM Node object is a Text object
5.recursively looks at node n and its descendants: replacing with their uppercase equivalents
6.Navigating Documents
7.A DOM Core Document Analyzer
8.Adding/Replacing DOM Content