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 相关文章推荐
JS 树形递归实例代码
May 18 Javascript
jquery滚动条插件jScrollPane的使用介绍
Nov 08 Javascript
js为空或不是对象问题的快速解决方法
Dec 11 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Apr 01 Javascript
jQuery控制Div拖拽效果完整实例分析
Apr 15 Javascript
基于原生JS实现图片裁剪
Aug 01 Javascript
原生js实现倒计时--2018
Feb 21 Javascript
Ionic学习日记实现验证码倒计时
Feb 08 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
Apr 17 Javascript
关于单文件组件.vue的使用
Sep 20 Javascript
koa+jwt实现token验证与刷新功能
May 30 Javascript
js实现窗口全屏示例详解
Sep 17 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
Yii分页用法实例详解
2014/12/04 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
关于hashchangebroker和statehashable的补充文档
2011/08/08 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
2013/01/24 Javascript
js中继承的几种用法总结(apply,call,prototype)
2013/12/26 Javascript
js propertychange和oninput事件
2014/09/28 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2014/12/20 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
2015/02/18 Javascript
jQuery实现的多级下拉菜单效果代码
2015/08/24 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
javascript HTML5 canvas实现打砖块游戏
2020/06/18 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
vue.js实现备忘录功能的方法
2017/07/10 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
2018/03/17 Javascript
详解Axios 如何取消已发送的请求
2018/10/20 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
Python isinstance判断对象类型
2008/09/06 Python
python不带重复的全排列代码
2013/08/13 Python
Java分治归并排序算法实例详解
2017/12/12 Python
Java及python正则表达式详解
2017/12/27 Python
浅谈Python中的bs4基础
2018/10/21 Python
Django 创建后台,配置sqlite3教程
2019/11/18 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
keras topN显示,自编写代码案例
2020/07/03 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
世界上最大的餐具公司:Oneida
2016/12/17 全球购物
报纸媒体创意广告词
2014/03/17 职场文书
节能环保标语
2014/06/12 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
扶贫办主任查摆“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书
python的变量和简单数字类型详解
2021/09/15 Python
spring cloud eureka 服务启动失败的原因分析及解决方法
2022/03/17 Java/Android