Traversing an HTML Table with JavaScript and DOM Interfaces

Creating Elements in JavaScript using createElement(), createTextNode(), appendChild(), setAttribute(), etc.:

<head>
<title>Sample code - Traversing an HTML Table with JavaScript and DOM Interfaces</title>
<script>
function start() {
// get the reference for the body
var mybody=document.getElementsByTagName("body").item(0);
// creates an element whose tag name is TABLE
mytable = document.createElement("TABLE");
// creates an element whose tag name is TBODY
mytablebody = document.createElement("TBODY");
// creating all cells
for(j=0;j<2;j++) {
// creates an element whose tag name is TR
mycurrent_row=document.createElement("TR");
for(i=0;i<2;i++) {
// creates an element whose tag name is TD
mycurrent_cell=document.createElement("TD");
// creates a Text Node
currenttext=document.createTextNode("cell is row "+j+", column "+i);
// appends the Text Node we created into the cell TD
mycurrent_cell.appendChild(currenttext);
// appends the cell TD into the row TR
mycurrent_row.appendChild(mycurrent_cell);
}
// appends the row TR into TBODY
mytablebody.appendChild(mycurrent_row);
}
// appends TBODY into TABLE
mytable.appendChild(mytablebody);
// appends TABLE into BODY
mybody.appendChild(mytable);
// sets the border attribute of mytable to 2;
mytable.setAttribute("border","2");
}
</script>
</head>
<body onload="start()">
</body>
</html>

Output: