提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

IE6-IE9中tbody的innerHTML不能赋值的解决方法

方法 解决 不能 赋值 IE6 innerHTML IE9 tbody
2023-06-13 09:15:46 时间

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

Js代码

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title>IE6-IE9中tbody的innerHTML不能复制bug</title>
</head>
<bodystyle="height:3000px">
<table>
<tbody>
<tr><td>aaa</td></tr>
</tbody>
</table>
<p>
<buttonid="btn1">GET</button><buttonid="btn2">SET</button>
</p>
<script>
vartbody=document.getElementsByTagName("tbody")[0]
functionsetTbody(){
tbody.innerHTML="<tr><td>bbb</td></tr>"
}
functiongetTbody(){
alert(tbody.innerHTML)
}
btn1.onclick=function(){
getTbody()
}
btn2.onclick=function(){
setTbody()
}
</script>
</body>
</html>

两个按钮，第一个获取tbody的innerHTML，第二个设置tbody的innerHTML。

获取时所有浏览器都弹出了tr的字符串，但设置时IE6-9不支持，而且报错，如图

可以利用特性判断来看浏览器是否支持tbody的innerHTML设值

varisupportTbodyInnerHTML=function(){
vartable=document.createElement("table")
vartbody=document.createElement("tbody")
table.appendChild(tbody)
varboo=true
try{
tbody.innerHTML="<tr></tr>"
}catch(e){
boo=false
}
returnboo
}()
alert(isupportTbodyInnerHTML)

点击下，看看你此时浏览本博客的浏览器是否支持

ClickMe

<scripttype="text/javascript">//<![CDATA[varisupportTbodyInnerHTML=function(){vartable=document.createElement("table")vartbody=document.createElement("tbody")vartr=document.createElement("tr")vartd=document.createElement("td")vartxt=document.createTextNode("a")td.appendChild(txt)tr.appendChild(td)tbody.appendChild(tr)table.appendChild(tbody)varboo=truetry{tbody.innerHTML="<tr><td>b</td></tr>"}catch(e){boo=false}returnboo}();tbodyInnerHTML.onclick=function(){if(isupportTbodyInnerHTML){alert("你的浏览器支持tbody的innerHTML赋值")}else{alert("你的浏览器是IE6-9内核，不支持tbody的innerHTML赋值")}}//]]></script>

对于IE6-IE9里如果要设置tbody的innerHTML，可以使用如下替代方法

Js代码

functionsetTBodyInnerHTML(tbody,html){
vardiv=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方法替换

Js代码

functionsetTBodyInnerHTML(tbody,html){
vardiv=document.createElement("div")
div.innerHTML="<table>"+html+"</table>"
tbody.parentNode.replaceChild(div.firstChild.firstChild,tbody)
}

相关文章