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 Ajax学习实例 向页面发出请求,返回XML格式数据
Mar 14 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
Apr 12 Javascript
jquery 触发a链接点击事件解决方案
May 02 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
Feb 24 Javascript
jquery实现带二级菜单的导航示例
Apr 28 Javascript
一个JavaScript用逗号分割字符串实例
Sep 22 Javascript
angularJS结合canvas画图例子
Feb 09 Javascript
jQuery实现跨域iframe接口方法调用
Mar 14 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
Nov 28 Javascript
vue.js入门(3)——详解组件通信
Dec 02 Javascript
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
layui 设置table 行的高度方法
Aug 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
SONY SRF-M100的电路分析
2021/03/02 无线电
汉字转化为拼音(php版)
2006/10/09 PHP
JS中encodeURIComponent函数用php解码的代码
2012/03/01 PHP
php基于表单密码验证与HTTP验证用法实例
2015/01/06 PHP
php保存任意网络图片到服务器的方法
2015/04/14 PHP
zen_cart实现支付前生成订单的方法
2016/05/06 PHP
laravel 框架执行流程与原理简单分析
2020/02/01 PHP
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
2013/11/19 Javascript
jQuery+PHP实现动态数字展示特效
2015/03/14 Javascript
浅析javascript中的事件代理
2015/11/06 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
最全面的百度地图JavaScript离线版开发
2016/09/10 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
2017/04/26 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
2017/06/12 jQuery
vue 利用路由守卫判断是否登录的方法
2018/09/29 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
2019/06/21 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
2019/09/15 jQuery
js实现盒子拖拽动画效果
2020/08/09 Javascript
JavaScript代码简化技巧实例解析
2020/09/09 Javascript
Python中DJANGO简单测试实例
2015/05/11 Python
Python中条件判断语句的简单使用方法
2015/08/21 Python
剖析Python的Twisted框架的核心特性
2016/05/25 Python
Python人脸识别初探
2017/12/21 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
pip指定python位置安装软件包的方法
2019/07/12 Python
基于python操作ES实例详解
2019/11/16 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
Python SMTP发送电子邮件的示例
2020/09/23 Python
python实现三壶谜题的示例详解
2020/11/02 Python
如何使用html5与css3完成google涂鸦动画
2012/12/16 HTML / CSS
2014年感恩母亲演讲稿
2014/05/27 职场文书
检察院院长群众路线教育实践活动个人整改措施
2014/10/04 职场文书
企业宣传稿范文
2015/07/23 职场文书
vue.js Router中嵌套路由的实用示例
2021/06/27 Vue.js
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python