accessing DOM HTML Elements in a dynamically built table.
I have a question:
Say I am building an HTML table, and as an example, I'll use this sample taken from the Mozilla Developer Center website:
Code:
***********************************************************
<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>
**********************************************************
Problem:Why is there no HTML when I view the source?
And since (strangely) there is no HTML, I cannot write any JavaScript/DHTML functionality to manipulate what I just created...
Why is this true?
Thanks.
Blessings.Doug Dexter
Last edited by TwoD; 02-04-06 at 03:41 PM.
Reason: Please use [code][/code] wrappers!
For one I'd recommend using lower case element names.
Manipulating the DOM through JS does not produce visible source, at all. To manipulate things you can do something like this:
Code:
var table = document.createElement('table');
table.setAttribute('id', 'myTable');
/* In this code block, document.getElementByID('myTable')
will be exactly the same as table so: */
table.style.width = '100px';
// and
document.getElementByID('myTable').style.width = '100px';
// both do the same thing.
View source doesn't show any changes because it shows you what's in the actual file in the browser cache (Temporary Internet Files id using IE). That file is never manipulated by the script, only what's in the memory cache.
Linear Mode
