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 相关文章推荐
jquery 多级下拉菜单核心代码
May 21 Javascript
jquery比较简洁的软键盘特效实现方法
Mar 19 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
Dec 20 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
Vue.js实现按钮的动态绑定效果及实现代码
Aug 21 Javascript
通过js控制时间,一秒一秒自己动的实例
Oct 25 Javascript
使用ajax的post同步执行(实现方法)
Dec 21 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 Javascript
Vue组件中的data必须是一个function的原因浅析
Sep 03 Javascript
Vuex新手的理解与使用详解
May 31 Javascript
js+canvas实现纸牌游戏
Mar 16 Javascript
微信小程序实现列表左右滑动
Nov 19 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中sql注入漏洞示例 sql注入漏洞修复
2014/01/24 PHP
destoon整合UCenter图文教程
2014/06/21 PHP
Laravel6.2中用于用户登录的新密码确认流程详解
2019/10/16 PHP
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
javascript数组使用调用方法汇总
2007/12/08 Javascript
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
Prototype Class对象学习
2009/07/19 Javascript
20个最新的jQuery插件
2012/01/13 Javascript
解析URI与URL之间的区别与联系
2013/11/22 Javascript
javascript控制在光标位置插入文字适合表情的插入
2014/06/09 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
2017/01/04 Javascript
JS中正则表达式全局匹配模式 /g用法详解
2017/04/01 Javascript
vue实现todolist单页面应用
2017/04/11 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
JS学习笔记之数组去重实现方法小结
2019/05/29 Javascript
vue filter 完美时间日期格式的代码
2019/08/14 Javascript
javascript/jquery实现点击触发事件的方法分析
2019/11/11 jQuery
微信小程序仿抖音短视频切换效果的实例代码
2020/06/24 Javascript
在antd中setFieldsValue和defaultVal的用法
2020/10/29 Javascript
[03:12]完美世界DOTA2联赛PWL DAY9集锦
2020/11/10 DOTA
python实现从pdf文件中提取文本,并自动翻译的方法
2018/11/28 Python
如何运行.ipynb文件的图文讲解
2019/06/27 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
Pytorch通过保存为ONNX模型转TensorRT5的实现
2020/05/25 Python
python中如何使用虚拟环境
2020/10/14 Python
您的网上新华书店:文轩网
2016/08/24 全球购物
国贸专业的职业规划范文
2014/01/23 职场文书
五年级语文教学反思
2014/01/30 职场文书
《爱的教育》读书心得
2014/11/08 职场文书
中班下学期幼儿评语
2014/12/30 职场文书
2015年度村委会工作总结
2015/04/29 职场文书
图文详解matlab原始处理图像几何变换
2021/07/09 Python
Redis Lua脚本实现ip限流示例
2022/07/15 Redis