How does javascript dynamically load tables and dynamically add table rows

One, dynamic loading table

1. First set the id for the table's add location in HTML

I'm just going to put a div tag inside the body tag of the HTML that says that the table is going to be added inside that div. The following

< Div id = "TDL >" < Div>

2. Write the add table statement in javascript

If in the current HTML file, write in < Script> Label interior, such as

 
<script type="text/javascript" > 

document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>" //The tables added here can be created to suit your needs

</script> 

If by introducing a js file, write the following statement directly in the js file (assuming test.js)

 
document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>" 

Then introduce your own HTML file

 
<script type="text/javascript" src="test.js"></script> 

Add table rows dynamically

1. First, set the id in HTML to add the position of the table row, which must be < Tbody> Internal (not particularly accurate, but according to my test on this conclusion, there are other ways please leave a message, thank you), as follows

 
<table> 
<thead></thead> 

<tfoot><tfoot> //Tfoot and thead are used in conjunction with the tbody, but when I'm writing them, I don't have to use them.

<tbody id="rows"></tbody> 

</table> 
[sS ]*n 
2. in javascript In the content, you create the rows and cells first, and then in the <.tbody> Add the line as follows  
[code] 
row=document.createElement("tr"); //Create a line

td1=document.createElement("tr"); //Create cell

td1.appendChild(document.createTextNode("content")); //Add content to the cell

row.appendChild(td1); //Adds a cell to a row

document.getElementById("rows").append(row); //Add rows to <Tbody> In the

Three, my little discovery (maybe others already know...)

1. I did a test by myself. The table id = "TDL > < / table> Document.getelementbyid (" TDL ").innerhtml ="< Tr> < Td> < / td> < / tr>" , so that the lines of the table in the HTML are not added.

2. After the above test, I changed the HTML again to say < Table> < Tr> < Td id = "t '> < Td> < Tr> < / table> Document.getelementbyid ("t").innerhtml ="< P> Content< / p>" , the test can add content.

3. Thinking: what conclusions might be drawn from the above two tests?