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. [Perl]抓取个人的所有闪存+格式化保存为文本

    以下代码保存为utf8文本格式 环境:ActivePerl v5.16 built for MSWin32-x86 两个要调整的地方: for my $i (17..45) {  这里改成自己对应的页 ...

  2. ok6410 android driver(4)

    Install busybox for goldfish/phone 1. Download busybox source code http://www.busybox.net/ 2. Decomp ...

  3. .net4.0注册到IIS ，重新注册IIS ，iis注册

    IIS和.netfw4.0安装顺序是从前到后,如果不小心颠倒了,无所谓. 打开程序-运行-cmd:输入一下命令重新注册IIS C:\WINDOWS\Microsoft.NET\Framework\v4 ...

  4. C#设计模式——生成器模式(Builder Pattern)

    一.概述在软件系统中,有时候面临着复杂的对象创建,该对象由一定算法构成的子对象组成,由于需求变化,这些子对象会经常变换,但组合在一起的算法却是稳定的.生成器模式可以处理这类对象的构建,它提供了一种封装 ...

  5. Java数字图像处理基础 - 必读

    写了很多篇关于图像处理的文章,没有一篇介绍Java 2D的图像处理API,文章讨论和提及的 API都是基于JDK6的,首先来看Java中如何组织一个图像对象BufferedImage的,如图: 一个B ...

  6. ajax post提交的方式

    ajax的post注意事项 注意post请求的Content-Type为application/x-www-form-urlencoded,参数是在请求体中,即上面请求中的Form Data(后台通过 ...

  7. NopCommerce中的单例

    项目中经常会遇到单例的情况.大部分的单例代码都差不多像这样定义: internal class SingletonOne { private static SingletonOne _singleto ...

  8. csharp: Procedure with DAO(Data Access Object) and DAL(Data Access Layer)

    sql script code: CREATE TABLE DuCardType ( CardTypeId INT IDENTITY(1,1) PRIMARY KEY, CardTypeName NV ...

  9. sql:Oracle11g 表,视图,存储过程结构查询

    -- Oracle 11 G --20160921 涂聚文再次修改 --Geovin Du --GetTables SELECT owner, object_name, created FROM al ...

  10. 常用 Git 命令清单（摘录）

    来源:阮一峰的网络日志 网址:http://www.ruanyifeng.com/blog/2015/12/git-cheat-sheet.html 我每天使用 Git ,但是很多命令记不住. 一般来 ...