IE6-IE9中tbody的innerHTML不能赋值,重现代码如下
<!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,可以使用如下替代方法
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方法替换
function setTBodyInnerHTML(tbody, html) {
var div = document.createElement('div')
div.innerHTML = '<table>' + html + '</table>'
tbody.parentNode.replaceChild(div.firstChild.firstChild, tbody)
}
- 大小: 3.2 KB
分享到:
相关推荐
IE6-IE9中tbody的innerHTML不能赋值,重现代码如下 Js代码 <!DOCTYPE html> <html> <head> <meta charset=utf-8/> <title>IE6-IE9中tbody的innerHTML不能复制bug</title> </...
# IE6-IE9兼容性问题列表及解决办法 ## 概述 随着技术的发展,浏览器不断迭代更新,为了确保网站能在不同的浏览器版本下正常显示和运行,了解并解决兼容性问题是前端开发者的重要任务之一。从IE6到IE9,微软的...
最近发现各大类库都能利用xxx[removed]=HTML片断来生成节点元素,再把它们插入到目标元素的各个位置上。这东西实际上就是insertAdjacentHTML,但是IE可恶的innerHTML把这优势变成劣势。
总的来说,当在IE6、7、8、9中遇到innerHTML无法赋值的问题时,开发者应转向使用DOM API进行更底层的操作,而不是依赖innerHTML属性。这可能需要更多的代码量,但能确保在所有浏览器中的兼容性。同时,随着现代...
在早期的Internet Explorer浏览器,尤其是IE6到IE9版本中,开发者经常遇到一些与现代Web标准不兼容的问题。本文主要探讨了两个在这些版本中常见的问题:JSON支持和使用`innerHTML`属性更新`table`元素时遇到的挑战,...
总结来说,解决IE6-IE9不支持`table.innerHTML`的问题,需要借助于创建临时元素和操作DOM结构的方法。这个方法不仅适用于`table`元素,也可以扩展到其他不支持`innerHTML`的元素,以实现类似的功能。同时,随着...
首先时飘忽不定的collapse的border,ie6偏偏...排查了半天,结果是IE的table元素为只读,不能使用innerHTML!!!! 同样为只读的元素还有COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, T
本文将针对一个特定的问题——如何在Internet Explorer 6(IE6)中使`select`元素的`title`属性能够正常显示——进行详细解析,并提供一种通过JavaScript来实现解决方案的方法。 #### 问题背景 在IE6中,当用户...
在IE中,`innerHTML`属性不能用于动态地设置`<table>`的内容。但可以用于`<div>`或`<span>`等元素。 **解决方法:** 如果需要动态更新表格内容,建议使用上述创建元素的方法,而不是直接修改`innerHTML`。例如,...
值得注意的是,如果`<table>`元素没有`<tbody>`子元素,直接在IE6中对`table`使用`appendChild`方法是无效的,因为IE6不支持对`table`元素直接进行`appendChild`操作(IE8及以上版本已修复此问题)。在这种情况下,...
然而,这个属性在不同浏览器中的行为并不完全一致,尤其是在Internet Explorer(IE)中。这个问题在处理某些特定类型的HTML元素时尤为突出。 在非IE浏览器(如Firefox、Chrome、Safari等)中,innerHTML可以用于...
IE8及更低版本不支持原生的JSON对象,因此需要使用JSON2.js等库来提供兼容性。 7. **性能优化**: - 动态创建大量表格元素可能导致性能问题,特别是在旧版IE中。使用文档片段(`document.createDocumentFragment()...
Bootstrap表格在设计网页时是一种非常常用的组件,尤其在处理大量数据时,为了提供更好的用户体验,我们经常需要在tbody部分添加竖向滚动条,同时保持表头固定不动。这样,当用户滚动内容时,表头始终保持可见,便于...
可以先将字符串赋值给元素的`innerHTML`属性,然后再用`append()`。 3. **示例代码:** ```javascript // 创建新的表格行和单元格 var newRow = document.createElement('tr'); var newCell = document....
在网页开发过程中,Firefox(火狐浏览器)和Internet Explorer(IE浏览器)的兼容性问题一直是一大挑战。这两个浏览器在解析HTML、CSS以及JavaScript时有着不同的实现方式,导致某些代码在Firefox下正常运行,但在IE...
在IE6及后续版本的IE浏览器中,这些元素被认为是只读的,因此直接修改它们的`innerHTML`属性会导致异常。 #### 异常代码示例 以下是触发异常的代码示例: ```html <table id="t1"></table> document....