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. C#设计模式——访问者模式(Visitor Pattern)

    一.概述由于需求的改变,某些类常常需要增加新的功能,但由于种种原因这些类层次必须保持稳定,不允许开发人员随意修改.对此,访问者模式可以在不更改类层次结构的前提下透明的为各个类动态添加新的功能.二.访问 ...

  2. Winform开发框架之通用数据导入导出操作的事务性操作完善

    1.通用数据导入导出操作模块回顾 在我的Winfrom开发框架里面,有一个通用的导入模块,它在默默处理这把规范的Excel数据导入到不同的对象表里面,一直用它来快速完成数据导入的工作.很早在随笔< ...

  3. 【C#进阶系列】02 PE文件，程序集，托管模块，元数据——还是那个Hello world

    好了,还是这张图,还是一样的Hello world. 因为本章其实很多都是讲一些命令行编译啊什么鬼的配置类的东西,要用的时候直接百度或者回头查书就可以了, 所以了解一下也就行了,也没有记录下来,接下来 ...

  4. csharp: DataTable Rename ColumnName and remove Column

    enum ChangeNume { /// <summary> /// 简体 /// </summary> gbk=1, /// <summary> /// 英文 ...

  5. kFreeBSD 7.0于2013/05/04发布 桌面环境 GNOME 3....

    kFreeBSD 7.0于2013/05/04发布 桌面环境 GNOME 3.4, KDE 4.8.4, Xfce 4.8, and LXDE

  6. 从几篇文字得到关于web app开发的性能问题的答案

    1. http://blogs.adobe.com/creativecloud/are-mobile-web-apps-slow/ 2. http://software.intel.com/zh-cn ...

  7. treap树---Double Queue

    HDU   1908 Description The new founded Balkan Investment Group Bank (BIG-Bank) opened a new office i ...

  8. String系列

    String 简介 String 是java中的字符串,它继承于CharSequence.String类所包含的API接口非常多.为了便于今后的使用,我对String的API进行了分类,并都给出的演示 ...

  9. java初始化构造函数调用顺序

    类初始化时构造函数调用顺序: (1)初始化对象的存储空间为零或null值:  (2)调用父类构造函数:  (3)按顺序分别调用类成员变量和实例成员变量的初始化表达式:  (4)调用本身构造函数. 例子 ...

  10. 【poj 3167】Cow Patterns（字符串--KMP匹配+数据结构--树状数组）

    题意:给2个数字序列 a 和 b ,问按从小到达排序后,a中的哪些子串与b的名次匹配. a 的长度 N≤100,000,b的长度 M≤25,000,数字的大小 K≤25. 解法:[思考]1.X 暴力. ...