IE9和IE9以下浏览器tbody无法使用innerHTML简单介绍

当前位置：首页 > 代码实例 > html5 css3代码分类 > bootstrap > IE9和IE9以下浏览器tbody无法使用innerHTML简单介绍

本章节介绍一table表格的tbody元素的一个特点，那就是在IE9和IE9以下浏览器中，无法使用innerHTML设置元素的html内容，但是可以获取元素的html内容，下面就通过代码实例介绍一下如何解决此问题。

先看一段代码实例:

[ bootstrap ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>51前端</title>
<script type="text/javascript"> 
window.onload=function(){
  var tbody=document.getElementsByTagName('tbody')[0];
  function setTbody(){ 
    tbody.innerHTML='<tr><td>softwhy.com</td></tr>';
  } 
  function getTbody(){ 
    alert(tbody.innerHTML) 
  } 
  btGet.onclick=function(){ 
    getTbody() 
  } 
  btSet.onclick=function() { 
    setTbody() 
  } 
}
</script> 
</head> 
<body> 
<table> 
<tbody> 
  <tr><td>51前端</td></tr> 
</tbody> 
</table> 
<button id="btGet">获取内容</button>
<button id="btSet">设置内容</button> 
</body> 
</html>

在上面的代码中，可以在所有的主流浏览器中获取tbody下面的html内容，但是却无法设置。

下面就介绍一下此问题的解决方案，希望能够给需要的朋友带来帮助。

最好的方式就是首先检测一下是否支持innerHTML属性，如果支持，则直接使用此属性，否则就采用其他的方案。

代码如下:

[ bootstrap ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>51前端</title>
<script type="text/javascript"> 
window.onload=function(){
  var tbody=document.getElementsByTagName('tbody')[0];
  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
  }()
    
  function setTBodyInnerHTML(tbody, html){ 
    var div=document.createElement('div');
    div.innerHTML='<table>'+html+'</table>';
    tbody.parentNode.replaceChild(div.firstChild.firstChild,tbody) 
  }
    
  btSet.onclick=function(){
    var str="<tr><td>softwhy.com</td></tr>";
    if(isupportTbodyInnerHTML){
      setTBodyInnerHTML(tbody,str);
    }    
    else{
      tbody.innerHTML=str;
    }
  }
}
</script> 
</head> 
<body> 
<table> 
<tbody> 
  <tr><td>51前端</td></tr> 
</tbody> 
</table> 
<button id="btSet">设置内容</button> 
</body> 
</html>

代码描述：IE9和IE9以下浏览器 tbody无法使用innerHTML。IE9和IE9以下浏览器tbody无法使用innerHTML简单介绍

下载全部收藏

153 203

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册