日期:2014-05-16  浏览次数:20347 次

【js】appendchild的操作和innerHTML赋值【有何不同】求解惑
本帖最后由 jwf007 于 2013-01-06 11:14:40 编辑
同标题向一个<table id="list"></table>添加行列数据:<tr><td>name</td></tr>
【用appendChild的方法】
var newtr=document.createElement('tr');
var newtd=document.createElement('td');
var newtxt=document.createTextNode('name');
newtd.appendChild(newtxt);
newtr.appendChild(newtd);
document.getElementById('list').appendChild(newtr);
【用修改innerHTML属性的方法】
var str='<tr><td>name</td></tr>';
document.getElementById('list').innerHTML=str;

这两种操作的效果是一样的【在FF、chrome中是一样的,但IE9以下innerHTML都是只读的所以无法成功】。
-----------------------------*********************************************************
************************************************************************************
【第一大问题求高手指教】
姑且不论IE。先说用innerHTML修改<table>之后,使用document.getElementById('list').firstChild居然死活报【不是对象,或对象为空】。那么接下来的removeChild()之类的操作也是没戏了。
我又alert(typeof document.getElementById('list').firstChild);居然不是object Object,而是text Object;

问题1结束》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》
【第二大问题求高手指教】
所有的网页考虑IE这个坑货总是难免的。既然IE9-版本都不支持修改innerHTML属性那么有什么好办法可以动态修改table的内容呢?【除非逼的我不用table
innerHTML 只读 appendChild

------解决方案--------------------
设置table不要用innerHTML,td节点可以设置innerHTML,一般是appendChild【IE下要tbody,table节点appendchild也无效】,或者table.insertRow,tr.insertCell,参考:ie和firefox下操作table对象的异同