js里的insertCell和appendChild的区别

最近被一个奇怪的脚本问题困扰了好长时间，今天终于将原因弄清楚了，而且这个经验的确值得总结一下。

insertCell是html里的，appendChild是dom里的，其实两者并没什么关联（我也不知道对不对，暂且就当它是这样吧~），但还是想把它们扯在一起说。

事情是这样的，公司开发有一个下拉框的控件，是根据用户输入的数据实时查询数据库，显示与输入内容相关的数据，类似于C/S下的ComboBox。

将这个控件添加到科室申领系统之后，出现了一些怪事，就是在这个控件的选择项目之后的回调函数里面，返回的数据竟然错位了。由于出错的几部机器都是windows2000，开头还以为是系统的问题。查了好久，最后竟然发现是控件将从数据库取回来的数构造成html时的脚本里出了问题。然后就把这个方法考出来，写了一个单独的html文件，结果发现在我的开发机上和另外一部windows2000机器上返回的结果不一样……再一步一步的查，最后确定是insertCell函数出问题。

今天，我又花了一早上的时间研究这个问题，难道这几个脚本真的跟系统有关？通过查相关资料，一些教程上说，insertCell是将cell插入到row的最后一个子元素后面，原文对insertCell的参数说明如下“The default value is -1, which appends the new cell to the end ofthe cells collection.”照这样看来，应该不会出错呀，每次新增一个cell对象都插入到最后面，这就是我想要的啊，为什么在我的电脑上可以，而有些电脑就不行呢？

于是，继续追查原因，我写了一个html文件，模拟这个运行环境，经过一段时间的测试。终于查明了真相，insertCell函数果然是问题的关键！

原来insertCell并没有像我们所想的那样将cell对象插入到row的最后一个子元素后面，它只是插入到最后一个可见子元素后面而已。其实这样讲，也没有完全正确。因为我发现有一种情况例外，在某个条件下，它确实是插入到最后一个子元素的后面了，也就是说和appendChild一样。

也许这样讲很不好了解，下面帖出我写的html文件的代码~在程序里可以看到把insertCell改为appendChild后就能正常工作了。怀疑insertCell和机器的性能有关系，如果循环执行的时候太慢就会像单步执行那样得到不是自己想要的顺序。而连续执行就不会出错。具体为什么会这样，我也搞不懂……

<tablestyle="width:100%;height:100%;" border="1px"cellpadding="1px" cellspacing="1px">

<tr height="50%">

<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" οnclick="tr_insertCell()" />

<br /><br/>

<inputtype="button" value="单步appendChild" οnclick="tr_appendChild()" />

<br /><br/>

<inputtype="button" value="连续insertCell" οnclick="tr_insertCells()" />

<br /><br/>

<inputtype="button" value="连续appendChild" οnclick="tr_appendChilds()" />

<br /><br/>

<inputtype="button" value="重 置" οnclick="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>