IE6-IE9中tbody的innerHTML不能赋值的解决方法
更新时间：2014年09月26日 17:31:18 投稿：whsnow
这篇文章主要介绍了IE6-IE9中tbody的innerHTML不能赋值的解决方法，很实用，需要的朋友可以参考下
IE6-IE9中tbody的innerHTML不能赋值，重现代码如下
Js代码
<!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
<script type="text/javascript">// <![CDATA[ var isupportTbodyInnerHTML = function () { var table = document.createElement('table') var tbody = document.createElement('tbody') var tr = document.createElement('tr') var td = document.createElement('td') var txt = document.createTextNode('a') td.appendChild(txt) tr.appendChild(td) tbody.appendChild(tr) table.appendChild(tbody) var boo = true try{ tbody.innerHTML = '<tr><td>b</td></tr>' } catch(e) { boo = false } return boo }(); tbodyInnerHTML.onclick = function() { if (isupportTbodyInnerHTML) { alert('你的浏览器支持tbody的innerHTML赋值') } else { alert('你的浏览器是IE6-9内核，不支持tbody的innerHTML赋值') } } // ]]></script>
对于IE6-IE9里如果要设置tbody的innerHTML，可以使用如下替代方法
Js代码
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方法替换
Js代码
function setTBodyInnerHTML(tbody, html) {
var div = document.createElement('div')
div.innerHTML = '<table>' + html + '</table>'
tbody.parentNode.replaceChild(div.firstChild.firstChild, tbody)
}
相关文章
这篇文章主要介绍了详解使用webpack构建多页面应用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章介绍了JS限制Textarea文本域字符个数的具体实现，有需要的朋友可以参考一下2013-08-08
本文通过一段简单的实例代码给大家介绍微信小程序利用canvas 绘制幸运大转盘，代码很简单，感兴趣的朋友跟随脚本之家小编一起看看吧2018-07-07
在进行自己的后台改版时，大体布局都使用了bootstrap，剩下的表单部分没理由不去使用它，对于表单的美化和布局，bootstrap做的也是很不错的。下文给大家介绍Bootstrap表单Form全面解析，感兴趣的朋友一起看下吧2016-06-06
下面小编就为大家带来一篇简单封装js的dom查询实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
Bootstrap每天必学之弹出框（Popover）插件,弹出框的内容完全可使用 Bootstrap 数据 API（Bootstrap Data API）来填充，如何实现请参考本文2016-04-04
这篇文章主要为大家详细介绍了JavaScript canvas实现九宫格切图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要为大家详细介绍了利用js编写响应式侧边栏的相关代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
javascript 获取多条数据(模拟ajax获取数据),这样的好处不用额外的ajax读取链接，减轻服务器负担。2009-06-06
获取键盘控制事件是实现交互性最有力的方法之一。2008-04-04
最新评论