Html5不允许修改但允许赋值,IE6-9中tbody的innerHTML不能赋值bug

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

IE6-IE9中tbody的innerHTML不能复制bug

aaa

GETSET

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

function setTbody() {

tbody.innerHTML = '

bbb'

}

function getTbody() {

alert(tbody.innerHTML)

}

btn1.onclick = function() {

getTbody()

}

btn2.onclick = function() {

setTbody()

}

两个按钮，第一个获取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 = '

'

} 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 = '

'

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 = '

'

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.

相关：

IE6-IE9中tbody的innerHTML不能赋值

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

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

当li的子元素中有浮动(float)时,IE6/IE7中

元素的下面会产生4px空隙的bug. 代码如下:

• &lt ...

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

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

devexpress中ASPxGridView控件初始化赋值

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

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

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

IE6/IE7中li底部4px的Bug

当li的子元素中有浮动(float)时,IE6/IE7中

元素的下面会产生4px空隙的bug. XHTML

• &lt ...

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 &lt ...

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

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

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

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

随机推荐

JSP页面元素构成

1.page指令

【转】Apache的Order Allow,Deny 详解

Apache的Order Allow,Deny 详解   Allow和Deny可以用于apache的conf文件或者.htaccess文件中(配合Directory, Location, Files等 ...

陷阱~SQL全表扫描与聚集索引扫描

SqlServer中在查询时,我们为了优化性能,通常会为where条件的字段建立索引,如果条件比较固定还会建立组合索引,接下来,我们来看一下索引与查询的相关知识及相关陷阱. SQL表自动为主键加聚集索 ...

WinCE 5.0模拟器,在 win7 下安装后, VS2008里不显示

来源:http://blog.csdn.net/masterlonely/article/details/8302932 现状: Win7 32位旗舰版 VS2008 Team 在安装了: Windo ...

ExtJs4 笔记(10) Ext.tab.Panel 选项卡

本篇讲解选项卡控件. 一.基本选项卡 首先我们来定义一个基本的选项卡控件,其中每个Tab各有不同,Tab的正文内容可以有三种方式获取: 1.基本方式:通过定义html和items的方式. 2.读取其他 ...

java 计算源码的行数

import java.io.BufferedReader;import java.io.File;import java.io.FileReader;import java.io.IOExcepti ...

apply和call与this

函数本身的apply方法,改变this指向哪个对象: function getAge() { var y = new Date().getFullYear(); return y - this.bir ...

Vue源码之目录结构

Vue版本:2.6.9 源码结构图 ├─ .circleci // 包含CircleCI持续集成/持续部署工具的配置文件 ├─ .github // 项目相关的说明文档,上面的说明文档就在此文件夹 ├ ...

Frequency-tuned Salient Region Detection MATLAB代码出错修改方法

论文:Frequency-tuned Salient Region Detection.CVPR.2009 MATLAB代码运行出错如下: Error using makecform>parse ...

luogu P1220 关路灯

题目描述 某一村庄在一条路线上安装了n盏路灯,每盏灯的功率有大有小(即同一段时间内消耗的电量有多有少).老张就住在这条路中间某一路灯旁,他有一项工作就是每天早上天亮时一盏一盏地关掉这些路灯. 为了给村 ...