How does javascript dynamically load tables and dynamically add table rows?

I. Dynamic table Loading

1. First, set the id for the location where the table is added in html.

That is, write a div label inside the html body label to indicate that the table is to be added to the inside of the div. As follows:

<Div id = "tdl"> <div>

2. Write the statement for adding a table in javascript.

If it is in the current html file, it is written in the <script> tag, as shown in
Copy codeThe Code is as follows:
<Script type = "text/javascript">

Document. getElementById ("tbl "). innerHTML = "<table> <tr> <td> </tr> </table>" // you can create tables as needed.

</Script>

If a js file is introduced, directly write the following statement in the js file (assuming test. js ):
Copy codeThe Code is as follows:
Document. getElementById ("tbl"). innerHTML = "<table> <tr> <td> </tr> </table>"

Then introduce your own html file
Copy codeThe Code is as follows:
<Script type = "text/javascript" src = "test. js"> </script>

2. dynamically add table rows

1. first, set the id for the position added to the table row in html, which must be inside <tbody> (not particularly accurate, but according to my test, this conclusion is obtained, please leave a message if you have other methods. Thank you .)
Copy codeThe Code is as follows:
<Table>
<Thead> </thead>

<Tfoot> // both tfoot and thead are used together with the tbody, but it is useless when I write it.

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

</Table>
[\ S \ S] * \ n
2. In javascript content, you need to first create a CCB and a cell, and then add rows in <. tbody>, as shown below:
[Code]
Row = document. createElement ("tr"); // create a row

Td1 = document. createElement ("tr"); // create a cell

Td1.appendChild (document. createTextNode ("content"); // add content to a cell

Row. appendChild (td1); // Add a cell to the row

Document. getElementById ("rows"). append (row); // Add the row to <tbody>


3. My Small Discoveries (maybe someone else knows ,,,)

1. I did a test myself. I wrote <table id = "tdl"> </table> in html and document in javascript. getElementById ("tdl "). innerHTML = "<tr> <td> </tr>". After this is written, the table rows in html are not added.

2. after completing the above test, I changed the html to write <table> <tr> <td id = "t'> <td> <tr> </table>, write document in javascript. getElementById ("t "). innerHTML = "<p> content </p>". You can add content to the test.

3. Thinking: from the two tests above, it seems that I can draw some conclusions, but I haven't thought about how to summarize them. Which labels can be directly added through innerHTML?