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 相关文章推荐
调试代码导致IE出错的避免方法
Apr 04 Javascript
AngularJS的内置过滤器详解
May 14 Javascript
JS回调函数简单用法示例
Feb 09 Javascript
js实现简单的选项卡效果
Feb 23 Javascript
jQuery Pagination分页插件使用方法详解
Feb 28 Javascript
详解用vue.js和laravel实现微信授权登陆
Jun 23 Javascript
Vue单文件组件基础模板小结
Aug 10 Javascript
webpack构建的详细流程探底
Jan 08 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
Feb 09 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
May 05 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
Aug 07 Javascript
jquery分页优化操作实例分析
Aug 23 jQuery
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
如何利用php+mysql保存和输出文件
2006/10/09 PHP
php zend解密软件绿色版测试可用
2008/04/14 PHP
PHP form 表单传参明细研究
2009/07/17 PHP
PHP 第三节 变量介绍
2012/04/28 PHP
PHP中的Streams详细介绍
2014/11/12 PHP
PHP的Yii框架中View视图的使用进阶
2016/03/29 PHP
PHP模版引擎原理、定义与用法实例
2019/03/29 PHP
javascript设计模式 接口介绍
2012/07/24 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
2014/01/07 Javascript
js清空form表单中的内容示例
2014/05/20 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
2016/03/13 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
JavaScript中const、var和let区别浅析
2016/10/11 Javascript
详解Sea.js中Module.exports和exports的区别
2017/02/12 Javascript
vuejs2.0子组件改变父组件的数据实例
2017/05/10 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
JS简单判断是否在微信浏览器打开的方法示例
2019/01/08 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
2019/09/12 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
2019/11/13 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
2020/01/07 Javascript
[01:29:31]VP VS VG Supermajor小组赛胜者组第二轮 BO3第一场 6.2
2018/06/03 DOTA
布同 Python中文问题解决方法(总结了多位前人经验,初学者必看)
2011/03/13 Python
CentOS下使用yum安装python-pip失败的完美解决方法
2017/08/16 Python
Python django搭建layui提交表单,表格,图标的实例
2019/11/18 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
细说CSS3中的选择符
2008/10/17 HTML / CSS
比利时买床:Beter Bed
2017/12/06 全球购物
李维斯法国官网:Levi’s法国
2019/07/13 全球购物
智能室内花园:Click & Grow
2021/01/29 全球购物
《鞋匠的儿子》教学反思
2014/03/02 职场文书
2014国培学习感言
2014/03/05 职场文书
山东省召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2015年员工试用期工作总结
2014/12/12 职场文书