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

			
     				        
     
aaa
        
            GETSET        
    		

 

两个按钮，第一个获取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 = '
     
      ' + html + '
'    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 = '
     
      ' + html + '
'    tbody.parentNode.replaceChild(div.firstChild.firstChild, tbody)}

 

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

 

The innerHTML property is read-only on the , , , , , , , , , , , and  objects.

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

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

 

相关：