IE6-IE9中tbody的innerHTML不能赋值的解决方法_javascript技巧
程序员文章站
2022-03-10 10:38:01
...
IE6-IE9中tbody的innerHTML不能赋值,重现代码如下
' + html + '
'
while(tbody.firstChild) {
tbody.removeChild(tbody.firstChild)
}
tbody.appendChild(div.firstChild.firstChild)
}
' + html + '
'
tbody.parentNode.replaceChild(div.firstChild.firstChild, tbody)
}
Js代码
IE6-IE9中tbody的innerHTML不能复制bug
aaa |
两个按钮,第一个获取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 = '
用一个div来包含一个table,然后删除tbody里的所有元素,最后给tbody添加div的第一个元素的第一个元素,即div>table>tr。
当然还有一个更精简的版本,它直接采用replaceChild方法替换
Js代码
function setTBodyInnerHTML(tbody, html) { var div = document.createElement('div') div.innerHTML = '
推荐阅读
-
IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解决方案
-
IE6-IE9不支持table.innerHTML的解决方法分享_javascript技巧
-
关于IE中getElementsByClassName不能用的问题解决方法_javascript技巧
-
关于IE中getElementsByClassName不能用的问题解决方法_javascript技巧
-
JavaScript中Textarea滚动条不能拖动的解决方法_javascript技巧
-
JavaScript中Textarea滚动条不能拖动的解决方法_javascript技巧
-
IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解决方案_经验交流
-
IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解决方案
-
IE6/7/8/9中Table/Select的innerHTML不能赋值的解决方法_javascript技巧
-
IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解决方案_经验交流