IE9和IE9浏览器tbody不支持innerHTML代码下载

当前位置：首页 > 代码实例 > html5 css3代码分类 > 其他 > IE9和IE9浏览器tbody不支持innerHTML代码下载

innerHTML是最为常用的属性之一，并且也属于w3c标准，浏览器的兼容性也非常的好，但是有一个地方是例外的，那就是在IE6-IE9浏览器中，tbody不支持innerHTML设置内容，代码实例如下:

[ 其他 ] 运行代码下载代码

<!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 oget=document.getElementById("get");
  var oset=document.getElementById("set");
    
  oget.onclick=function(){getTbody()}
  oset.onclick=function(){setTbody()}
    
  function setTbody(){ 
    tbody.innerHTML='<tr><td>51前端二</td></tr>' 
  } 
  function getTbody(){ 
    alert(tbody.innerHTML) 
  } 
}
</script> 
</head> 
<body> 
<table> 
<tbody> 
<tr><td>51前端一</td></tr> 
</tbody> 
</table> 
<input type="button" id="get" value="获取内容"/>
<input type="button" id="set" value="设置内容"/>
</body> 
</html>

上面的代码在IE6-IE9浏览器中不能够设置tbody的内容，但是能够获取。

下面介绍一下如何解决此问题，直接看代码:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="https://www.51qianduan.com/" /> 
<title>51前端</title> 
<script type="text/javascript"> 
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>' 
  while(tbody.firstChild){ 
    tbody.removeChild(tbody.firstChild) 
  } 
  tbody.appendChild(div.firstChild.firstChild) 
}
  
window.onload=function(){
  var tbody=document.getElementsByTagName('tbody')[0];
  var oget=document.getElementById("get");
  var oset=document.getElementById("set");
  
  var htmlStr='<tr><td>51前端二</td></tr>';
  oset.onclick=function(){
    if(isupportTbodyInnerHTML){
      tbody.innerHTML='<tr><td>51前端二</td></tr>' 
    }
    else{
      setTBodyInnerHTML(tbody,htmlStr)
    } 
  } 
}
</script> 
</head> 
<body> 
<table> 
<tbody> 
<tr><td>51前端一</td></tr> 
</tbody> 
</table> 
<input type="button" id="set" value="设置内容"/>
</body> 
</html>

代码描述：IE9和IE9浏览器 tbody不支持innerHTML。IE9和IE9浏览器tbody不支持innerHTML代码下载

下载全部收藏

135 180

用户评论

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