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 相关文章推荐
this[] 指的是什么内容 讨论
Mar 24 Javascript
jQuery前端分页示例分享
Feb 10 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
Jun 23 Javascript
JQuery Ajax WebService传递参数的简单实例
Nov 02 Javascript
vue2.0开发实践总结之入门篇
Dec 06 Javascript
用jQuery实现圆点图片轮播效果
Mar 19 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
Aug 09 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
Mar 05 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
vue使用pdfjs显示PDF可复制的实现方法
Dec 14 Javascript
JavaScript实现简单计算器
Mar 19 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
Nov 12 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+ajax实现文章自动保存的方法
2014/12/30 PHP
php 输出缓冲 Output Control用法实例详解
2020/03/03 PHP
jQuery 性能优化指南(2)
2009/05/21 Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
2010/09/14 Javascript
HTML Dom与Css控制方法
2010/10/25 Javascript
js 限制数字 js限制输入实现代码
2012/12/04 Javascript
常见表单重复提交问题整理及解决方法
2013/11/13 Javascript
给js文件传参数(详解)
2014/07/13 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
浅析javascript的return语句
2015/12/15 Javascript
省市选择的简单实现(基于zepto.js)
2016/06/21 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
2017/06/29 Javascript
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
微信小程序实现图片懒加载的示例代码
2017/12/13 Javascript
react-redux中connect的装饰器用法@connect详解
2018/01/13 Javascript
vue调试工具vue-devtools安装及使用方法
2018/11/07 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
JavaScript实现HTML导航栏下拉菜单
2020/11/25 Javascript
python中实现php的var_dump函数功能
2015/01/21 Python
python实现备份目录的方法
2015/08/03 Python
Windows下Anaconda2安装NLTK教程
2018/09/19 Python
对python同一个文件夹里面不同.py文件的交叉引用方法详解
2018/12/15 Python
pyqt5与matplotlib的完美结合实例
2019/06/21 Python
Python ORM框架Peewee用法详解
2020/04/29 Python
Python把图片转化为pdf代码实例
2020/07/28 Python
Python+kivy BoxLayout布局示例代码详解
2020/12/28 Python
旧时光糖果:Old Time Candy
2018/02/05 全球购物
思想品德自我评价
2014/02/04 职场文书
2014年小学植树节活动方案
2014/03/02 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书
龙潭大峡谷导游词
2015/02/10 职场文书
2015年学生管理工作总结
2015/05/26 职场文书
联村联户简报
2015/07/21 职场文书
班主任工作经验交流会总结
2015/11/02 职场文书
带你彻底理解JavaScript中的原型对象
2021/04/14 Javascript