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 相关文章推荐
利用JS进行图片的切换即特效展示图片
Dec 03 Javascript
Javascript基础知识(二)事件
Sep 29 Javascript
javascript中的遍历for in 以及with的用法
Dec 22 Javascript
详解angular中如何监控dom渲染完毕
Jan 03 Javascript
使用BootStrap进行轮播图的制作
Jan 06 Javascript
jQuery制作图片旋转效果
Feb 02 Javascript
JS路由跳转的简单实现代码
Sep 21 Javascript
JS基于递归实现网页版计算器的方法分析
Dec 20 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
Jan 30 Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 Javascript
基于element-ui的rules中正则表达式
Sep 04 Javascript
JS绘图Flot应用图形绘制异常解决方案
Oct 16 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
php 设计模式之 单例模式
2008/12/19 PHP
php下将多个数组合并成一个数组的方法与实例代码
2011/02/03 PHP
PHP 处理TXT文件(打开/关闭/检查/读取)
2013/05/13 PHP
PHP判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
Laravel框架使用技巧之使用url()全局函数返回前一个页面的地址方法详解
2020/04/06 PHP
js 纯数字不重复排列的另类方法
2010/07/17 Javascript
JavaScript获取元素尺寸和大小操作总结
2015/02/27 Javascript
JS实现随机乱撞彩色圆球特效的方法
2015/05/05 Javascript
JavaScript中join()方法的使用简介
2015/06/09 Javascript
基于insertBefore制作简单的循环插空效果
2015/09/21 Javascript
javascript实现简单的全选和反选功能
2016/01/05 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
2016/01/08 Javascript
深入浅析AngularJS和DataModel
2016/02/16 Javascript
基于jQuery实现的无刷新表格分页实例
2016/02/17 Javascript
JavaScript必看小技巧(必看)
2016/06/07 Javascript
BootStrapTable服务器分页实例解析
2016/12/20 Javascript
vue2.0 中#$emit,$on的使用详解
2017/06/07 Javascript
js图片放大镜实例讲解(必看篇)
2017/07/17 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
JavaScript 继承 封装 多态实现及原理详解
2019/07/29 Javascript
VUE 实现element upload上传图片到阿里云
2020/08/12 Javascript
js实现QQ邮箱邮件拖拽删除功能
2020/08/27 Javascript
Python常见工厂函数用法示例
2018/03/21 Python
python批量读取txt文件为DataFrame的方法
2018/04/03 Python
Python实现接受任意个数参数的函数方法
2018/04/21 Python
Pycharm连接远程服务器并实现远程调试的实现
2019/08/02 Python
python修改文件内容的3种方法详解
2019/11/15 Python
python 元组的使用方法
2020/06/09 Python
Python基于正则表达式实现计算器功能
2020/07/13 Python
python+django+selenium搭建简易自动化测试
2020/08/19 Python
python打包多类型文件的操作方法
2020/09/21 Python
HTML5 微格式和相关的属性名称
2010/02/10 HTML / CSS
雷人标语集锦
2014/06/19 职场文书
2015年纪检监察工作总结
2015/04/08 职场文书