Differences between insertcell and appendchild in JS

Recently, it has been plagued by a strange script problem for a long time. Today, I have finally figured out the cause, and this experience is indeed worth summing up.

Insertcell is in HTML, and appendchild is in Dom. In fact, there is no association between the two (I don't know, right? For the moment, when it is like this ~), But I still want to talk about them together.

This is the case. The company developed a drop-down box control that queries the database in real time based on user input data and displays data related to the input content, similar to ComboBox in C/S.

After this control is added to the department application system, some strange events occur, that is, the returned data is misplaced in the callback function after the control is selected as a project. Some machines with errors are windows, which is regarded as a system problem at the beginning. After checking for a long time, I finally found that there was a problem in the script when the control constructed the number retrieved from the database into HTML. Then I tested this method and wrote a separate HTML file. The result showed that the result returned on my development machine is different from that on another Windows2000 machine ...... Next, let's take a step further and finally confirm that the insertcell function has a problem.

Today, I spent another morning studying this issue. Are these scripts really related to the system? In some tutorials, insertcell inserts cells to the end of the last sub-element of the row. The parameters of insertcell in the original article are described as follows: "The default value is-1, which appends the new cell to the end ofthe cells collection. "In this case, there should be no errors. Every time a cell object is added, it is inserted to the end. This is what I want. Why is it possible on my computer, but some computers won't work?

As a result, I continued to trace the cause. I wrote an HTML file, simulated the running environment, and tested it for a while. Finally, I found out the truth. The insertcell function is indeed the key to the problem!

Insertcell didn't insert the cell object to the end of the last child element of the row as we thought. It was just inserted to the end of the last visible child element. In fact, this is not completely correct. I found that there is one exception. Under a certain condition, it is indeed inserted to the end of the last child element, that is, it is the same as appendchild.

It may be hard to understand this. I will post the code of the HTML file I wrote below ~ In the program, we can see that after insertcell is changed to appendchild, it will work normally. It is suspected that insertcell is related to the performance of the machine. If the loop execution is too slow, it will get the sequence as if it were a single step execution. Continuous execution will not cause errors. Why ......

<Tablestyle = "width: 100%; Height: 100%;" border = "1px" cellpadding = "1px" cellspacing = "1px">

& Lt; tr Height = "50%" & gt;

<TD>

<Table id = "newtbl" style = "width: 100%; Height: 100%;" border = "1px" cellpadding = "1px" cellspacing = "1px">

<Trid = "newtr">

</Tr>

</Table>

</TD>

</Tr>

<Tr>

<TD>

<Tablestyle = "width: 100%; Height: 100%;" border = "0" cellpadding = "0" cellspacing = "0">

<Tr>

<Tdstyle = "width: 200px;" align = "center">

<Inputtype = "button" value = "insertcell" onclick = "tr_insertcell ()"/>

<Br/>

<Inputtype = "button" value = "one-step appendchild" onclick = "tr_appendchild ()"/>

<Br/>

<Inputtype = "button" value = "continuous insertcell" onclick = "tr_insertcells ()"/>

<Br/>

<Inputtype = "button" value = "continuous appendchild" onclick = "tr_appendchilds ()"/>

<Br/>

<Inputtype = "button" value = "reset" onclick = "RESET ()"/>

</TD>

<TD> <textareastyle = "height: 100%; width: 100%;" id = "txtresult"> </textarea> </TD>

</Tr>

</Table>

</TD>

</Tr>

</Table>

 

<SCRIPT type = "text/JavaScript" Language = "JavaScript">

VaR I = 1;

Function tr_insertcell ()

{

VaR newtr = Document. getelementbyid ("newtr ");

VaR TD = newtr. insertcell ();

TD. innertext = I ++;

If (I % 3 = 0) TD. style. Display = "NONE ";

Txtresult. value = newtr. innerhtml;

}

Function tr_appendchild ()

{

VaR newtr = Document. getelementbyid ("newtr ");

VaR TD = Document. createelement ("TD ");

Newtr. appendchild (TD );

TD. innertext = I ++;

If (I % 3 = 0) TD. style. Display = "NONE ";

Txtresult. value = newtr. innerhtml;

}

Function tr_insertcells ()

{

For (var j = 0; j <10; j ++)

Tr_insertcell ();

}

Function tr_appendchilds ()

{

For (var j = 0; j <10; j ++)

Tr_appendchild ();

}

Function reset ()

{

I = 1;

Txtresult. value = "";

VaR newtr = Document. getelementbyid ("newtr ");

While (newtr. childnodes. length> 0)

Newtr. removechild (newtr. firstchild );

}

</SCRIPT>