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


Posted in Javascript onSeptember 26, 2014

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不支持,而且报错,如图

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

可以利用特性判断来看浏览器是否支持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) 
}
Javascript 相关文章推荐
js自带函数备忘 数组
Dec 29 Javascript
jquery.validate分组验证代码
Mar 17 Javascript
对 jQuery 中 data 方法的误解分析
Jun 18 Javascript
jQuery实现瀑布流的取巧做法分享
Jan 12 Javascript
javascript实时获取鼠标坐标值并显示的方法
Apr 30 Javascript
jQuery+Ajax实现限制查询间隔的方法
Jun 07 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
Sep 23 Javascript
vue2笔记 — vue-router路由懒加载的实现
Mar 03 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 Javascript
Layui多选只有最后一个值的解决方法
Sep 02 Javascript
vue实现移动端拖动排序
Aug 21 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
Dec 23 Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 #Javascript
jquery uploadify 在FF下无效的解决办法
Sep 26 #Javascript
jQuery判断当前点击的是第几个li的代码
Sep 26 #Javascript
javascript 自定义回调函数示例代码
Sep 26 #Javascript
jquery和js实现对div的隐藏和显示方法
Sep 26 #Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
Sep 26 #Javascript
jquery实现一个简单好用的弹出框
Sep 26 #Javascript
You might like
Terran兵种对照表
2020/03/14 星际争霸
浅析php header 跳转
2013/06/17 PHP
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
PHP用户注册邮件激活账户的实现代码
2017/05/31 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
JavaScript中“基本类型”之争小结
2013/01/03 Javascript
深入理解javascript动态插入技术
2013/11/12 Javascript
jquery序列化表单去除指定元素示例代码
2014/04/10 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
2016/05/23 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
javascript中函数的写法实例代码详解
2018/10/28 Javascript
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
JavaScript十大取整方法实例教程
2020/12/03 Javascript
Saltstack快速入门简单汇总
2016/03/01 Python
对Python3之方法的覆盖与super函数详解
2019/06/26 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
Django实现CAS+OAuth2的方法示例
2019/10/30 Python
解决keras使用cov1D函数的输入问题
2020/06/29 Python
python 爬虫之selenium可视化爬虫的实现
2020/12/04 Python
彪马美国官网:PUMA美国
2017/03/09 全球购物
个人自我鉴定范文
2013/10/04 职场文书
幼儿教师考核制度
2014/01/25 职场文书
护理专业自我鉴定
2014/01/30 职场文书
安全保证书范文
2014/04/29 职场文书
庆祝教师节标语
2014/10/09 职场文书
铣工实训报告
2014/11/05 职场文书
自我评价优缺点范文
2015/03/11 职场文书
辩论赛开场白大全(主持人+辩手)
2015/05/29 职场文书
出生证明格式
2015/06/15 职场文书
开业典礼致辞
2015/07/29 职场文书
2016先进集体事迹材料范文
2016/02/25 职场文书
python基础详解之if循环语句
2021/04/24 Python
通过T-SQL语句创建游标与实现数据库加解密功能
2022/03/16 SQL Server
Java 通过手写分布式雪花SnowFlake生成ID方法详解
2022/04/07 Java/Android