IE6-IE9不支持table.innerHTML的解决方法分享


Posted in Javascript onSeptember 14, 2012

测试代码:

<table id="test"> 
</table> 
<script> 
var oTable=document.getElementById("test"); 
oTable.innerHTML="<tr><td>innerHTML</td></tr>"; 
</script>

上述代码在IE6-9中无效,直接报错:

IE9:Invalid target element for this operation.

IE6-8:Unknown runtime error

查找IE的文档(http://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx)后发现有这么一段:

The innerHTML property is read-only on the col, colGroup, frameSet, html, head, style, table, tBody, tFoot, tHead, title, and tr objects.

所以只能用其他方案解,我的方案:
var oTable=document.getElementById("test"); 
//oTable.innerHTML="<tr><td>innerHTML</td></tr>"; 
setTableInnerHTML(oTable,"<tr><td>innerHTML</td></tr>"); function setTableInnerHTML(table, html) { 
if(navigator && navigator.userAgent.match(/msie/i)){ 
var temp = table.ownerDocument.createElement('div'); 
temp.innerHTML = '<table><tbody>' + html + '</tbody></table>'; 
if(table.tBodies.length == 0){ 
var tbody=document.createElement("tbody"); 
table.appendChild(tbody); 
} 
table.replaceChild(temp.firstChild.firstChild, table.tBodies[0]); 
} else { 
table.innerHTML=html; 
} 
}

这里只是对table做了处理,对其他不支持的元素可以用类似的方案。

另外,IE10中table已经支持innerHTML了。

作者:Artwl

Javascript 相关文章推荐
jquery中获取元素里某一特定子元素的代码
Dec 02 Javascript
node.js中的http.response.addTrailers方法使用说明
Dec 14 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
Mar 03 Javascript
盘点javascript 正则表达式中 中括号的【坑】
Mar 16 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
Aug 05 Javascript
Vue.js tab实现选项卡切换
May 16 Javascript
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
jQuery zTree插件快速实现目录树
Aug 16 jQuery
Vue打包后访问静态资源路径问题
Nov 08 Javascript
js实现适配移动端的拖动效果
Jan 13 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
Jul 12 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
Jul 20 Javascript
javascript时区函数介绍
Sep 14 #Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
Sep 14 #Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
Sep 14 #Javascript
基于JQuery的一句话搞定手风琴菜单
Sep 14 #Javascript
JQuery select控件的相关操作实现代码
Sep 14 #Javascript
11个用于提高排版水平的基于jquery的文字效果插件
Sep 14 #Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
Sep 14 #Javascript
You might like
php 过滤器实现代码
2010/08/09 PHP
基于PHP技术开发客服工单系统
2016/01/06 PHP
JavaScript入门教程(11) js事件处理
2009/01/31 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
2012/08/10 Javascript
JS获取浏览器语言动态加载JS文件示例代码
2014/10/31 Javascript
jquery实现多屏多图焦点图切换特效的方法
2015/05/04 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
2016/05/26 Javascript
JavaScript 是什么意思
2016/09/22 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
2019/05/05 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
javascript实现页面的实时时钟显示示例
2020/08/06 Javascript
微信小程序canvas动态时钟
2020/10/22 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
2021/02/25 Javascript
three.js 实现露珠滴落动画效果的示例代码
2021/03/01 Javascript
[02:44]完美大师赛主赛事淘汰赛第二日观众采访
2017/11/24 DOTA
[01:16]DOTA2小知识课堂 Ep.03 芒果树无伤肉山
2019/12/05 DOTA
Python实现正整数分解质因数操作示例
2018/08/01 Python
python爬虫实现中英翻译词典
2019/06/25 Python
python读写配置文件操作示例
2019/07/03 Python
Python实现串口通信(pyserial)过程解析
2019/09/25 Python
Python turtle库的画笔控制说明
2020/06/28 Python
HTML5实现直播间评论滚动效果的代码
2020/05/27 HTML / CSS
好药师网上药店:安全合法的网上药品零售药房
2017/02/15 全球购物
曼联官方网上商店:Manchester United Direct
2017/07/28 全球购物
写自荐信要注意什么
2013/12/26 职场文书
给男朋友的道歉信
2014/01/12 职场文书
大学生村官事迹材料
2014/01/21 职场文书
英语简历自我评价
2014/01/26 职场文书
《九寨沟》教学反思
2014/04/08 职场文书
物理分数没达标检讨书
2014/09/13 职场文书
中学生秋季运动会广播稿
2014/09/21 职场文书
热爱劳动主题班会
2015/08/14 职场文书
学校团代会开幕词
2016/03/04 职场文书
python在package下继续嵌套一个package
2022/04/14 Python