Creating a Table: Using the insertBefore Method with DOM : DOM Content : Development : JavaScript DHTML examples (example source code) Organized by topic






/*

JavaScript Unleashed, Third Edition

by Richard Wagner and R. Allen Wyke 



ISBN: 067231763X

Publisher Sams CopyRight 2000



*/



<HTML>

<HEAD>

<TITLE> Building tables using DOM </TITLE>

</HEAD>

<BODY ID="bodyNode">

<SCRIPT LANGUAGE="JavaScript">

<!--

row1column1Obj = document.createTextNode("Row 1, column 1  ");

tableObj = document.createElement("TABLE");

tbodyObj = document.createElement("TBODY");

tr1Obj = document.createElement("TR");

tr1td1Obj = document.createElement("TD");

tr1td2Obj = tr1td1Obj.cloneNode(false);

tr2td1Obj = tr1td1Obj.cloneNode(false);

tr2td2Obj = tr1td1Obj.cloneNode(false);

tr3td1Obj = tr1td1Obj.cloneNode(false);

tr3td2Obj = tr1td1Obj.cloneNode(false);

tr2Obj = tr1Obj.cloneNode(false);

tr3Obj = tr1Obj.cloneNode(false);

row1column2Obj = row1column1Obj.cloneNode(false);

row2column1Obj = row1column1Obj.cloneNode(false);



row2column2Obj = row1column1Obj.cloneNode(false);

row3column1Obj = row1column1Obj.cloneNode(false);

row3column2Obj = row1column1Obj.cloneNode(false);

row1column2Obj.nodeValue = "Row 1, column 2  ";

row2column1Obj.nodeValue = "Row 2, column 1  ";

row2column2Obj.nodeValue = "Row 2, column 2  ";

row3column1Obj.nodeValue = "Row 3, column 1  ";

row3column2Obj.nodeValue = "Row 3, column 2  ";

returnValue = tableObj.insertBefore(tbodyObj);

tbodyObj.insertBefore(tr3Obj);

tbodyObj.insertBefore(tr2Obj, tr3Obj);

tbodyObj.insertBefore(tr1Obj, tr2Obj);

tr1Obj.insertBefore(tr1td2Obj);

tr1Obj.insertBefore(tr1td1Obj, tr1td2Obj);

tr2Obj.insertBefore(tr2td2Obj);

tr2Obj.insertBefore(tr2td1Obj, tr2td2Obj);

tr3Obj.insertBefore(tr3td2Obj);

tr3Obj.insertBefore(tr3td1Obj, tr3td2Obj);

tr1td2Obj.insertBefore(row1column2Obj);

tr1td1Obj.insertBefore(row1column1Obj);

tr2td2Obj.insertBefore(row2column2Obj);

tr2td1Obj.insertBefore(row2column1Obj);

tr3td2Obj.insertBefore(row3column2Obj);

tr3td1Obj.insertBefore(row3column1Obj);

bodyNode.insertBefore(tableObj);

// -->

</SCRIPT>

</BODY>

</HTML>


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