html tbody给高度ie9,IE6-IE9中tbody的innerHTML不能赋值的解决方法

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

Js代码

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，可以使用如下替代方法

Js代码

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方法替换

Js代码

function setTBodyInnerHTML(tbody, html) {

var div = document.createElement('div')

div.innerHTML = '

'

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

}