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 相关文章推荐
ExtJS中文乱码之GBK格式编码解决方案及代码
Jan 20 Javascript
Js参数值中含有单引号或双引号问题的解决方法
Nov 06 Javascript
JS常用正则表达式总结
Nov 12 Javascript
JS中如何设置readOnly的值
Dec 25 Javascript
使用script的src实现跨域和类似ajax效果
Nov 10 Javascript
jquery分割字符串的方法
Jun 24 Javascript
js获取及修改网页背景色和字体色的方法
Dec 29 Javascript
Angular2  NgModule 模块详解
Oct 19 Javascript
vue2笔记 — vue-router路由懒加载的实现
Mar 03 Javascript
Vue组件之全局组件与局部组件的使用详解
Oct 09 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
Jun 04 Javascript
详解Vue.js 响应接口
Jul 04 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服务器实现多session并发运行
2006/10/09 PHP
PHP扩展编写点滴 技巧收集
2010/03/09 PHP
php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
php使用pdo连接mssql server数据库实例
2014/12/25 PHP
php源码的使用方法讲解
2019/09/26 PHP
Javascript获取HTML静态页面参数传递值示例
2013/08/18 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
2013/11/07 Javascript
js快速排序的实现代码
2013/12/08 Javascript
JavaScript中的toLocaleDateString()方法使用简介
2015/06/12 Javascript
JavaScript表单验证实例之验证表单项是否为空
2016/01/10 Javascript
浅谈jQuery添加的HTML,JS失效的问题
2016/10/05 Javascript
详解微信UnionID作用
2019/05/15 Javascript
jQuery zTree如何改变指定节点文本样式
2020/10/16 jQuery
Python中使用Inotify监控文件实例
2015/02/14 Python
Python的time模块中的常用方法整理
2015/06/18 Python
解决python2.7 查询mysql时出现中文乱码
2016/10/09 Python
python xml.etree.ElementTree遍历xml所有节点实例详解
2016/12/04 Python
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
django将图片上传数据库后在前端显式的方法
2018/05/25 Python
朴素贝叶斯分类算法原理与Python实现与使用方法案例
2018/06/26 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
Django利用elasticsearch(搜索引擎)实现搜索功能
2020/11/26 Python
pycharm 关闭search everywhere的解决操作
2021/01/15 Python
Python实现淘宝秒杀功能的示例代码
2021/01/19 Python
CSS3使用transition属性实现过渡效果
2018/04/18 HTML / CSS
公共事业管理本科生求职信
2013/10/07 职场文书
医学院护理专业应届生求职信
2013/11/12 职场文书
技术经理的自我评价范文
2013/12/03 职场文书
项目计划书范文
2014/01/09 职场文书
八一建军节感言
2014/02/28 职场文书
护理人员的自我评价分享
2014/03/15 职场文书
保护地球的标语
2014/06/17 职场文书
公务员培的训心得体会
2014/09/01 职场文书
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL