Original address
appendchild (), InsertBefore () is moving element node , when reading the note, you can also do a simple example test:
<div id= "Div1" > <p id= "P1" style= "Background-color:blue" >2014</p></div>
In the above code, p was originally in Div1, hr above, executed appendchild (), moved to the DIV2, hr below:
But today I'm in a real job, but I'm ignoring the problem. The code process is as follows:
1. Create a 5000 * 100 table with JS and save it to a temporary div;
2. Remove the first 100 rows of the table and load it into a table on the page;
The code is as follows:
1 <table id= "tablecontent" cellpadding= "0" cellspacing= "0" ></table> 2 3 var tablecontent = Document.geteleme Ntbyid ("Tablecontent"); 4 5 var trnum = 6 Tdnum = +, 7 html = "", 8 Tempdiv = document.createelement ("div"); 9 10//create a table of 5000 * 100 and place it in a temporary div with HTML + + "<table>"; (i = 0; i < Trnum; i++) {html + = "<tr>"; (j = 0; J < Tdnum; J + +) {html + = "<td>" + i + " | "+ j +" </td> ";}18 HTML + +" </tr> ";}21 HTML + +" </table> "; 22 tempdiv.innerhtml = html;23 24//Remove first 100 lines, load to tablecontent var trs = tempdiv.firstchild.firstchild.childnodes,26 T Rlen = trs.length;27 Temptbody = document.createelement ("Tbody"); (i = 0; i < && i < Trle N i++) {temptbody.appendchild (trs[i]); Where the problem is! }32 Tablecontent.appendchild (temptbody);
The cause of the problem:
Create a table and save it to a temporary div. Then remove the div and find all the row TR of the table and save it to TRS.
Then loop the TRS collection, take out the first 100, add to the temporary tbody, and the problem is here.
for (i = 0; i < && i < Trlen; i++) { temptbody.appendchild (trs[i]); }
when I perform a temptbody.appendchild (Trs[i]), I actually remove an element from the TRS, and the length of the TRS is getting smaller , so I don't get the result I want.
To solve this problem, it is simple, just add . CloneNode (True) .
for (i = 0; i < && i < Trlen; i++) { temptbody.appendchild (Trs[i].clonenode (true)); }
This kind of trivial problem, sometimes need to pay more attention, accumulate more. and the line and cherish, and write and pay attention to AH!
(GO) appendchild (), InsertBefore () is the moving element node!