IE6-IE9中tbody的innerHTML不能赋值，重现代码如下

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8"/>

		<title>IE6-IE9中tbody的innerHTML不能复制bug</title>

	</head>

	<body style="height:3000px">

        <table>

            <tbody>

                <tr><td>aaa</td></tr>

            </tbody>

        </table>

        <p>

            <button id="btn1">GET</button><button id="btn2">SET</button>

        </p>

    	<script>

            var tbody = document.getElementsByTagName('tbody')[0]

            function setTbody() {

                tbody.innerHTML = '<tr><td>bbb</td></tr>'

            }

            function getTbody() {

                alert(tbody.innerHTML)

            }

            btn1.onclick = function() {

                getTbody()

            }

            btn2.onclick = function() {

                setTbody()

            }

    	</script>

	</body>

</html>

两个按钮，第一个获取tbody的innerHTML，第二个设置tbody的innerHTML。

获取时所有浏览器都弹出了tr的字符串，但设置时IE6-9不支持，而且报错，如图

可以利用特性判断来看浏览器是否支持tbody的innerHTML设值

var isupportTbodyInnerHTML = function () {

    var table = document.createElement('table')

    var tbody = document.createElement('tbody')

    table.appendChild(tbody)

    var boo = true

    try{

        tbody.innerHTML = '<tr></tr>'

    } catch(e) {

        boo = false

    }

    return boo

}()

alert(isupportTbodyInnerHTML)

点击下，看看你此时浏览本博客的浏览器是否支持

Click Me

对于IE6-IE9里如果要设置tbody的innerHTML，可以使用如下替代方法

function setTBodyInnerHTML(tbody, html) {

    var div = document.createElement('div')

    div.innerHTML = '<table>' + html + '</table>'

    while(tbody.firstChild) {

    	tbody.removeChild(tbody.firstChild)

    }

    tbody.appendChild(div.firstChild.firstChild)

}

用一个div来包含一个table，然后删除tbody里的所有元素，最后给tbody添加div的第一个元素的第一个元素，即div>table>tr。

当然还有一个更精简的版本，它直接采用replaceChild方法替换

function setTBodyInnerHTML(tbody, html) {

    var div = document.createElement('div')

    div.innerHTML = '<table>' + html + '</table>'

    tbody.parentNode.replaceChild(div.firstChild.firstChild, tbody)

}

从MSDN上记录上看 col、colGroup、frameset、html、head、style、table、tfoot、tHead、title和tr的innerHTML都是只读的（IE6-IE9）。

The innerHTML property is read-only on the col, colGroup, frameSet, html, head, style, table, tBody, tFoot, tHead, title, and tr objects.

You can change the value of the title element using the document.title property.

To change the contents of the table, tFoot, tHead, and tr elements, use the table object model described in Building Tables Dynamically. However, to change the content of a particular cell, you can use innerHTML.

相关：

http://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx

IE6-9中tbody的innerHTML不能赋值bug的更多相关文章

  1. IE6-IE9中tbody的innerHTML不能赋值

    对于IE6-IE9里如果要设置tbody的innerHTML,可以使用如下替代方法 Js代码 function setTBodyInnerHTML(tbody, html) { var div = d ...

  2. IE6/IE7中li底部4px空隙的Bug

    当li的子元素中有浮动(float)时,IE6/IE7中<li>元素的下面会产生4px空隙的bug. 代码如下: <ul class="list"> < ...

  3. IE6/7中setAttribute不支持class/for/rowspan/colspan等属性

    如设置class属性 ? 1 el.setAttribute('class', 'abc'); 在IE6/7中样式“abc”将没有起作用,虽然使用el.getAttribute('class')能取到 ...

  4. devexpress中ASPxGridView控件初始化赋值

    写在ASPxGridView中OnCellEditorInitialize="ASPxGridView_progoods_CellEditorInitialize"  事件中: / ...

  5. C++中复制构造函数与重载赋值操作符总结

    前言 这篇文章将对C++中复制构造函数和重载赋值操作符进行总结,包括以下内容: 1.复制构造函数和重载赋值操作符的定义: 2.复制构造函数和重载赋值操作符的调用时机: 3.复制构造函数和重载赋值操作符 ...

  6. IE6/IE7中li底部4px的Bug

    当li的子元素中有浮动(float)时,IE6/IE7中<li>元素的下面会产生4px空隙的bug. XHTML <ul class="list"> < ...

  7. IE6/7中li浮动外边距无法撑开ul的解决方法

    昨天群里有人提出了这样的问题: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 < ...

  8. span 右浮动折行 解决ie6/7中span右浮动折行问题

    A floated box is shifted to the left or right until its outer edge touches the containing block edge ...

  9. 关于makefile中变量的多次赋值以及override指令

    1 基本原则如下 1.1 原则1 变量的普通赋值是有先后顺序的,后面的赋值会覆盖掉前面的赋值. 1.2 原则2 使用的时候,用的是其前面最后的赋值,就算其后面有使用了override指令的赋值也不会影 ...

随机推荐

  1. Sql Server来龙去脉系列之四 数据库和文件

        在讨论数据库之前我们先要明白一个问题:什么是数据库?     数据库是若干对象的集合,这些对象用来控制和维护数据.一个经典的数据库实例仅仅包含少量的数据库,但用户一般也不会在一个实例上创建太多 ...

  2. spring.net中的IOC和DI-初使用

    前面准备:下载spring.net并解压 下载地址:spring.net下载地址 Ioc:控制反转         DI:依赖注入 一.IOC(控制反转) 1.新建一个控制台程序springTest, ...

  3. 创建一个带模版的用户控件 V.3

    再重构此篇<创建一个带模版的用户控件  V.2>http://www.cnblogs.com/insus/p/4164149.html 让其它动态实现header,Item和Footer. ...

  4. sql: table,view,function, procedure created MS_Description in sql server

    --添加描述 geovindu --https://msdn.microsoft.com/en-us/library/ms180047.aspx --https://msdn.microsoft.co ...

  5. mysql zip install

    1.Question Description: 1.1 version: mysql-5.7.11-64 1.2 form: zip file 1.3 >mysqld --install (su ...

  6. sqlite3之基本操作（一）

    简单的介绍 SQLite数据库是一款非常小巧的嵌入式开源数据库软件,也就是说没有独立的维护进程,所有的维护都来自于程序本身.它是遵守ACID的关联式数据库管理系统,它的设计目标是嵌入式的,而且目前已经 ...

  7. Afinal

    1.注解功能 1)继承:FinalActivity ( 需要复制 afinal_0.5.1_bin.jar到lib下) 2)@ViewInject() public class AfinalActiv ...

  8. js填写银行卡号，每隔4位数字加一个空格

    1.原生js写法 !function () { document.getElementById('bankCard').onkeyup = function (event) { var v = thi ...

  9. SHAREPOINT 工作流审批权限问题

    继续我们上次的工作流,我们发现所有人都有审批权限,这和我们正常的逻辑相反,正常应该是只有审批人才有权限,其它人只能查看,如下 这样解决,同样为SpecialPermissions 绑定到新成员 > ...

  10. CRM 2013 系统设置新功能二：Entity images 图像字段

    CRM2013系统默认的许多实体都已经有了图像的选择,如 右上角可以设置当前用户的头像. 客户.联系人等都可以,下面将介绍一下此项新功能: 一.实体中新建图像字段,其中系统自动命名entityinag ...