IE 下的只读 innerHTML


Posted in Javascript onAugust 21, 2009

今天做东西遇到一个问题,我试图动态为一个表格添加多行数据,先定义了一个table:

<table> 
<thead> 
</thead> 
<tbody id="filelist"> 
</tbody> 
</table>

然后在JavaScript 中这样操作:
for(var i in entries){ 
... 
var filetable = document.getElementById('filelist'); 
filetable.innerHTML += '<tr><td>111</td><td>222</td></tr>'; 
}

在FireFox 下这么干是没有问题的,但是放到 IE 下面就死活不行了,问了下同事+搜索了一下,发现在 IE 下 COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR 这些元素的 innerHTML 属性都是只读的,不能直接操作。但是也不是没有解决办法,TD 的innerHTML 还是可以操作的,上面的代码可以这样修改:
for(var i in entries){ 
... 
var filetable = document.getElementById('filelist'); 
var tr = document.createElement('tr'); 
var td1 = document.createElement('td'); 
td1.innerHTML = '111'; 
var td2 = document.createElement('td'); 
td2.innerHTML = '222'; 
tr.appendChild(td1); 
tr.appendChild(td2); 
filetable.appendChild(tr); 
}

可以先使用 DOM 的 createElement 方法创建 tr 和 td,然后对 td 的 innerHTML 进行相应操作,最后用 appendChild 方法把创建的元素添加到 DOM 树中。这样在 IE 下就可以正常运行了。需要注意的是,如果你的 table 没有 tbody,而是这样:
<table id="filelist"></table>
这个时候就不能对 table 直接使用 appendChild 方法了,因为IE6 下 table 元素是不支持 appendChild 方法的(IE8 貌似已经支持了)。
网上也有人提出用 insertRow() 等方法来做,不过这个方法对不同浏览器的兼容也是有问题的(在FireFox 下就需要使用 insertRow(-1) ),所以就没用。
BTW,虽然之前也有意识地看了不少 JS 的资料,但还是实践出真知啊,现在刚开始手忙脚乱的,学习淡定ING
Javascript 相关文章推荐
javascript里的条件判断
Feb 27 Javascript
jQuery根据纬度经度查看地图处理程序
May 08 Javascript
JS实现遮罩层效果的简单实例
Nov 12 Javascript
JavaScript DOM节点添加示例
Jul 16 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
Mar 06 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
Mar 31 Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 Javascript
AngularJS Phonecat实例讲解
Nov 21 Javascript
浅谈js获取ModelAndView值的问题
Mar 28 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
May 08 Javascript
深入浅析vue-cli@3.0 使用及配置说明
May 08 Javascript
JS实现判断移动端PC端功能
Feb 21 Javascript
JS 控制CSS样式表
Aug 20 #Javascript
JS获取父节点方法
Aug 20 #Javascript
javascript 数组排序函数
Aug 20 #Javascript
用Javascript数组处理多个字符串的连接问题
Aug 20 #Javascript
JQUERY 浏览器判断实现函数
Aug 20 #Javascript
google地图的路线实现代码
Aug 20 #Javascript
JavaScript 字符串乘法
Aug 20 #Javascript
You might like
深入PHP异步执行的详解
2013/06/03 PHP
php通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
学习ExtJS Column布局
2009/10/08 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
2014/05/23 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
浅谈js中test()函数在正则中的使用
2016/08/19 Javascript
Javascript日期格式化format函数的使用方法
2016/08/30 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
微信小程序动态添加分享数据
2017/06/14 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
2018/08/17 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
2018/10/26 Javascript
nodejs中方法和模块用法示例
2018/12/24 NodeJs
js中的this的指向问题详解
2019/08/29 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
2020/12/04 Javascript
[01:00:13]完美世界DOTA2联赛 LBZS vs Forest 第一场 11.07
2020/11/09 DOTA
python调用java的Webservice示例
2014/03/10 Python
Pycharm学习教程(2) 代码风格
2017/05/02 Python
python3写爬取B站视频弹幕功能
2017/12/22 Python
关于Python的一些学习总结
2018/05/25 Python
对python while循环和双重循环的实例详解
2019/08/23 Python
django使用F方法更新一个对象多个对象字段的实现
2020/03/28 Python
Jupyter Notebook折叠输出的内容实例
2020/04/22 Python
Python super()函数使用及多重继承
2020/05/06 Python
python操作ini类型配置文件的实例教程
2020/10/30 Python
python 实现逻辑回归
2020/12/30 Python
python实现按日期归档文件
2021/01/30 Python
英国优质鞋类专家:Robinson’s Shoes
2017/12/08 全球购物
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
大专应届生个人简历的自我评价
2013/10/15 职场文书
校友会欢迎辞
2014/01/13 职场文书
《天游峰的扫路人》教学反思
2014/04/25 职场文书
公司年会策划方案
2014/05/17 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
2021/10/16 HTML / CSS
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
2022/01/18 HTML / CSS