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 相关文章推荐
Firefox div高度自适应
Apr 28 Javascript
基于jQuery实现点击同时更改两个iframe的网址
Jul 01 Javascript
IE下JS读取xml文件示例代码
Aug 05 Javascript
jQuery中阻止冒泡事件的方法介绍
Apr 12 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
Jun 01 Javascript
jQuery中inArray方法注意事项分析
Jan 25 Javascript
jquery仿QQ登录账号选择下拉框效果
Mar 22 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
Apr 25 Javascript
layui table设置前台过滤转义等方法
Aug 17 Javascript
详解三种方式解决vue中v-html元素中标签样式
Nov 22 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
Mar 13 Javascript
原生JS实现留言板
Mar 26 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
《魔兽争霸3:重制版》更新 多项视觉效果调整
2020/05/04 魔兽争霸
php中日期加减法运算实现代码
2011/12/08 PHP
dedecms中使用php语句指南
2014/11/13 PHP
微信公众平台DEMO(PHP)
2016/05/04 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解
2019/04/09 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
php实现简单四则运算器
2020/11/29 PHP
jquery tools 系列 scrollable学习
2009/09/06 Javascript
javascript options属性集合操作代码
2009/12/28 Javascript
超简单的jquery的AJAX用法
2010/05/10 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
2015/02/27 Javascript
jQuery提示插件alertify使用指南
2015/04/21 Javascript
使用vue.js开发时一些注意事项
2016/04/27 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
2016/08/02 Javascript
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
从0到1搭建element后台框架优化篇(打包优化)
2019/05/12 Javascript
浅谈vue3中effect与computed的亲密关系
2019/10/10 Javascript
微信小程序实现同时上传多张图片
2020/02/03 Javascript
NumPy 如何生成多维数组的方法
2018/02/05 Python
详解python解压压缩包的五种方法
2019/07/05 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
详解python中各种文件打开模式
2020/01/19 Python
python实现扫雷游戏的示例
2020/10/20 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
python爬虫如何解决图片验证码
2021/02/14 Python
CSS3等相关属性制作分页导航实现代码
2012/12/24 HTML / CSS
波兰化妆品和护肤品购物网站:eKobieca
2019/08/30 全球购物
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
专科毕业生就业推荐信
2013/11/01 职场文书
高一历史教学反思
2014/01/13 职场文书
加多宝凉茶广告词
2014/03/18 职场文书
物流管理专业毕业生求职信
2014/03/23 职场文书
小学数学教学经验交流材料
2014/05/22 职场文书
《平移和旋转》教学反思
2016/02/19 职场文书