AppendChild (), InsertBefore () is the moving element node!

Source: Internet
Author: User

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!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.