innerHTML在IE中报错解决方案

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

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-operation演示代码：

代码如下:

<!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操作方法或者表格操作方法见演示代码。

赞 (0)

相关推荐

  • javascript innerHTML、outerHTML、innerText、outerText的区别

    javascript innerHTML、outerHTML、innerText、outerText的区别

    1.功能讲解: innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取位于对象起始和结束标签内的文本 outerText 设置(包括标签)或获取(不包括标签)对象的文本 2.示例 <html> <head> <title>Demo</title> <style><!-- body {font-family:"宋体";

  • innerHTML与jquery里的html()区别介绍

    看个示例: 复制代码 代码如下: var tbody=document.createElement('tbody'); tbody.innerHTML='<tr><td>IE下tbody的innerHTML是只读的</td></tr>'; //在IE下报错,目标对象错误 现在用jquery的html试试, 复制代码 代码如下: $(tbody).html('<tr><td>IE下tbody的innerHTML是只读的</td&g

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

    测试代码: 复制代码 代码如下: <table id="test"> </table> <script> var oTable=document.getElementById("test"); oTable.innerHTML="<tr><td>innerHTML</td></tr>"; </script> 上述代码在IE6-9中无效,直接报错: IE

  • js innerHTML 改变div内容的方法

    改变文字innerHTML每个HTML元素具有InnerHtml属性定义的HTML代码和文字之间发生的元素的开幕式和闭幕式标记.通过改变一个元素的innerHTML后,一些用户交互,您可以更互动网页.但是,使用innerHTML需要一些准备,如果你希望能够利用它轻松,可靠.首先,你必须给予部分要更改身份证.与标识到位,你将能够使用getElementById功能,适用于所有的浏览器.在您认为建立您现在就可以操纵文字的要素.要开始了,让我们尝试改变文字一个大胆的标记.下面我们来看一个用js的inn

  • IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解决方案

    IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解决方案

    IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值,重现代码如下 复制代码 代码如下: <!DOCTYPE html><html>    <head>        <meta charset="utf-8"/>        <title>IE6-IE9中tbody的innerHTML不能复制bug</title>    </head>    <body style=&quo

  • innerHTML动态添加html代码和脚本兼容多个浏览器

    症状:给某个元素的 innerHTML 设置值时,如果提供的 HTML 代码中包含js脚本,很多时候这些脚本无效,或者在某种浏览器上有效,但在其它浏览器上无效. 原因:不同浏览器对插入 innerHTML 中的脚本有不同的处理方法.经过实践,归纳如下: 对于IE,首先, script 标签必须带 defer 属性,其次,在插入时刻,innerHTML 的所属节点必须在 DOM 树中. 对于 Firefox 和Opera,在插入时刻,innerHTML 的所属节点不可以在 DOM 树中. 根据上面

  • 放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解

    放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解

    在Ajax横道的今天,我们在页面交互上有了更高的要求,动态生成HTML毫无疑问是其中的一种.动态生成HTML的方式多种多样,其核心不外乎在前段(JS)或者后端(C#/PHP-)将数据组装成我们想要的模版,最终通过一定的方法输出给用户(innerHTML.documentWrite等方式). 缺点 1)拼接字符串的过程容易出错,常常忘了'/">等匹配的符号. 2)修改前台模版的同时容易遗忘同步更改动态生成的模版. 3)拼接字符串不直观和美观,不利于查找错误,例如:数据中如果存在HTML内容,

  • innerhtml用法 innertext用法 以及innerHTML与innertext的区别

    test.innerHTML: 也就是从对象的起始位置到终止位置的全部内容,包括Html标签. 上例中的test.innerHTML的值也就是"<span style="color:red">test1</span> test2 ". test.innerText: 从起始位置到终止位置的内容, 但它去除Html标签 上例中的text.innerTest的值也就是"test1 test2", 其中span标签去除了. te

  • innerHTML在IE中报错解决方案

    innerHTML在IE中报错解决方案

    问题:开发过程中,用到循环往table里面插入tr标签,然后tr里又循环插入td,在其它浏览器都没问题,但是在IE9及以下版本中都报错: google上得到答案:由于我之前不知道错误的原因,在百度找不到解决方法,后来用谷歌搜到了,外国有人也遇到过这个问题,并指出了问题的所在:http://www.aachin.info/techen/error-on-ie-9-script600-invalid-target-element-for-this-operation/?amp;utm_source=

  • python中报错"json.decoder.JSONDecodeError: Expecting value:"的解决

    在学习python语言中用json库解析网络数据时,我遇到了两个编译错误:json.decoder.JSONDecodeError: Expecting property name enclosed in double quotes:和json.decoder.JSONDecodeError: Expecting value:.费了一些时间才找到原因,在此记录总结,希望能对学习python的同学有所帮助. 我运行的程序初始如下: import json data=''' { 'name' : '

  • el-upload多选文件上传报错解决方案

    el-upload多选文件上传报错解决方案

    在element-ui中,el-upload可以进行文件多选操作. 在多选文件上传时,会循环调用上传方法.在第一次循环时,文件可以正常上传,第二次开始就会在 progress事件中报错: 尝试上传2个文件,在这里打印progress事件的参数: 会发现在第二次循环的时候,事件获取不到file,所以接下来的操作无法正常进行.如果不处理这个问题的话,上传方法依然可以使用,只不过最终传上去的只是第一个文件. 本人目前还不知道是什么原因造成了这个结果.但是经过查找相关问题找到了解决办法: 在进行文件多选

  • 完美解决vue中报错 “TypeError: Cannot read properties of null (reading'forEach')“

    完美解决vue中报错 “TypeError: Cannot read properties of null (reading ‘forEach‘)“ 报错截图: 报错原因: 上图的报错翻译过来其实就是无法读取 null 的属性.简单来说就是循环遍历的数组是 null 值,而一旦循环遍历的数组为 null 值的同时再使用 forEach 方法遍历数组就会出现此报错. 解决方案: 知道报错的原因,那么问题也就能迎刃而解了,由于之前是因为 null 值的问题才导致循环遍历报错,那么我们完全可以在进入循

  • javascript在myeclipse中报错的解决方法

    jqueryjQueryJQUERYJqueryJQueryjquery报错jsJSJsmyeclipseMyEclipseMyeclipse 1.选中报错的jquery文件"jquery-1.2.6.min.js". 2.右键选择 MyEclipse-->Exclude From Validation. 3.再右键选择 MyEclipse-->Run Validation 即可.

  • C#中SQL参数传入空值报错解决方案

    C#中的null与SQL中的NULL是不一样的,SQL中的NULL用C#表示出来就是DBNull.Value. 注意:SQL参数是不能接受C#的null值的,传入null就会报错. 下面我们看个例子: SqlCommand cmd=new SqlCommand("Insert into Student values(@StuName,@StuAge)" ,conn); cmd.parameters.add("@StuName" ,stuName); cmd.para

  • man -f/-k [keyword]在fedora 29 中报错nothing appropriate

    我们在使用 man 手册的时候,可以使用man -f [keyword]去查询keyword的在线文档,但是这时候会报错:(图来源自网络) 这是因为我们还没有建立 man 手册的索引缓存: 我们可以使用 mandb 进行更新:之后就能使用 man -f 或者 man -k 命令进行查找手册; [root@localhost tmp]# man -k aio aio (7) - POSIX asynchronous I/O overview aio.h (0p) - asynchronous in

  • 解决Python中报错TypeError: must be str, not bytes问题

    如下所示: #!/usr/bin/python import pickle shoplist=['apple','mango','carrot'] f = open('c:\poem.txt','w') pickle.dump(shoplist,f) f.close() del shoplist f = open('c:\poem.txt','r') storedlist = pickle.load(f) print(storedlist) 执行上述程序时候报错: TypeError: must

  • Springboot项目因为kackson版本问题启动报错解决方案

    问题现象 org.springframework.context.ApplicationContextException: Unable to start embedded container; nested exception is org.springframework.boot.context.embedded.EmbeddedServletContainerException: Unable to start embedded Tomcat     at org.springframew

  • Postgresql在mybatis中报错:操作符不存在:character varying == unknown的问题

    错误: 操作符不存在: character varying == unknown , Hint: 没有匹配指定名称和参数类型的操作符. 您也许需要增加明确的类型转换. 在Mybatis条件查询时,动态SQL的一个错误,sql写的也不多,没仔细看所以一直找不到错误,网上也找不到类似的错误,结果是低级错误... <div> <form:select path="finished" class="col-xs-12 form-control m-b"&g

随机推荐