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
close