innerHTML在IE中报错解决方案


Posted in Javascript onDecember 15, 2014

问题:开发过程中,用到循环往table里面插入tr标签,然后tr里又循环插入td,在其它浏览器都没问题,但是在IE9及以下版本中都报错:

innerHTML在IE中报错解决方案

google上得到答案:由于我之前不知道错误的原因,在百度找不到解决方法,后来用谷歌搜到了,外国有人也遇到过这个问题,并指出了问题的所在:http://www.aachin.info/techen/error-on-ie-9-script600-invalid-target-element-for-this-operation/?amp;utm_source=rss&utm_medium=rss&utm_campaign=error-on-ie-9-script600-invalid-target-element-for-this-operationinnerHTML在IE中报错解决方案演示代码:

<!DOCTYPE html>

<html lang="zh-cn">

    <head>

        <meta http-equiv="content-type" content="text/html;charset=utf-8" />

        <title>默认标题</title>

    </head>

    <body>

        <table id="mytable" border="1" cellpadding="1" cellspacing="0">

            <tr>

                <td>222</td>

            </tr>

        </table>

        <script type="text/javascript">

            var mytable = document.getElementById('mytable');

            var tr = mytable.getElementsByTagName('tr')[0];

            var td = mytable.getElementsByTagName('td')[0];

            

            //读取innerHTML(IE任何版本都不报错,IE6未测)

            alert(mytable.innerHTML);

            alert(tr.innerHTML);

            alert(td.innerHTML);

            

            //写入innerHTML

            // mytable.innerHTML = '<tr><td>11111</td></tr>'; //IE9及以下报错

            // tr.innerHTML = '<td>11111</td>';    //IE9及以下报错

            // td.innerHTML = '11111';            //所有版本不报错(IE6未测)

            

            //解决方法,使用DOM的原始操作方法或者表格操作方法

            // var btnRow = mytable.insertRow();

            // var cell = btnRow.insertCell(btnRow.getElementsByTagName('td').length);

            // cell.innerHTML = "some html text";

        </script>

    </body>

</html>

得出结论:IE9及以下版本的table以及tr的innerHTML属性都是只读的,你可以用它读取table或者tr中的值,但不能写入,写入就报错,另外在IE9及以下版本中td的innerHTML可读可写。解决方法:使用原始的DOM操作方法或者表格操作方法见演示代码。

Javascript 相关文章推荐
深入理解JavaScript单体内置对象
Jun 06 Javascript
原生js实现电商侧边导航效果
Jan 19 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
webpack学习教程之publicPath路径问题详解
Jun 17 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
Jul 18 Javascript
教你用Cordova打包Vue项目的方法
Oct 17 Javascript
用JavaScript做简易的购物车的代码示例
Oct 20 Javascript
JS与SQL方式随机生成高强度密码示例
Dec 29 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
Apr 16 Javascript
JS实现TITLE悬停长久显示效果完整示例
Feb 11 Javascript
通过js随机函数Math.random实现乱序
May 19 Javascript
js实现查询商品案例
Jul 22 Javascript
node.js中的fs.ftruncate方法使用说明
Dec 15 #Javascript
node.js中的fs.fsyncSync方法使用说明
Dec 15 #Javascript
node.js中的fs.writeSync方法使用说明
Dec 15 #Javascript
node.js中的fs.write方法使用说明
Dec 15 #Javascript
node.js中的http.createClient方法使用说明
Dec 15 #Javascript
node.js中的http.get方法使用说明
Dec 14 #Javascript
node.js中的http.createServer方法使用说明
Dec 14 #Javascript
You might like
推荐一篇入门级的Class文章
2007/03/19 PHP
PHP开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
thinkphp3.0输出重复两次的解决方法
2014/12/19 PHP
浅析PHP中Session可能会引起并发问题
2015/07/23 PHP
YiiFramework入门知识点总结(图文教程)
2015/12/28 PHP
php session实现多级目录存放实现代码
2016/02/03 PHP
Ajax,UTF-8还是GB2312 eval 还是execScript
2008/11/13 Javascript
JQuery 学习技巧总结
2010/05/21 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
js获取会话框prompt的返回值的方法
2015/01/10 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
2015/09/06 Javascript
基于jquery实现下拉框美化特效
2016/02/02 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
2017/01/30 Javascript
javascript实现Java中的Map对象功能的实例详解
2017/08/21 Javascript
react-native动态切换tab组件的方法
2018/07/07 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
2018/08/07 Javascript
详解如何在nuxt中添加proxyTable代理
2018/08/10 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
2019/03/29 Javascript
Layui Table js 模拟选中checkbox的例子
2019/09/03 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
[02:47]DOTA2英雄基础教程 野性怒吼兽王
2013/12/05 DOTA
wxpython 学习笔记 第一天
2009/03/16 Python
Python实现基于权重的随机数2种方法
2015/04/28 Python
Python基于正则表达式实现文件内容替换的方法
2017/08/30 Python
python寻找list中最大值、最小值并返回其所在位置的方法
2018/06/27 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
django框架cookie和session用法实例详解
2019/12/10 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
python 批量将中文名转换为拼音
2021/02/07 Python
美国益智玩具购物网站:Fat Brain Toys
2017/11/03 全球购物
优秀毕业生求职信范文
2014/01/02 职场文书
网站创业计划书
2014/04/30 职场文书
2015年秋学期教研工作总结
2015/10/14 职场文书
小学语文国培研修日志
2015/11/13 职场文书
入党申请书格式
2019/06/20 职场文书
导游词之江苏溱潼古镇
2019/11/27 职场文书