IE9和IE9以下瀏覽器中tbody不支援innerHTML解決方案

admin發表於2017-03-24
IE9瀏覽器HTML

innerHTML是最為常用的屬性之一，並且也屬於w3c標準，瀏覽器的相容性也非常的好，但是有一個地方是例外的，那就是在IE6-IE9瀏覽器中，tbody不支援innerHTML設定內容，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</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>螞蟻部落二</td></tr>' 
  } 
  function getTbody(){ 
    alert(tbody.innerHTML) 
  } 
}
</script> 
</head> 
<body> 
<table> 
<tbody> 
<tr><td>螞蟻部落一</td></tr> 
</tbody> 
</table> 
<input type="button" id="get" value="獲取內容"/>
<input type="button" id="set" value="設定內容"/>
</body> 
</html>

上面的程式碼在IE6-IE9瀏覽器中不能夠設定tbody的內容，但是能夠獲取。

下面介紹一下如何解決此問題，直接看程式碼:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</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>螞蟻部落二</td></tr>';
  oset.onclick=function(){
    if(isupportTbodyInnerHTML){
      tbody.innerHTML='<tr><td>螞蟻部落二</td></tr>' 
    }
    else{
      setTBodyInnerHTML(tbody,htmlStr)
    } 
  } 
}
</script> 
</head> 
<body> 
<table> 
<tbody> 
<tr><td>螞蟻部落一</td></tr> 
</tbody> 
</table> 
<input type="button" id="set" value="設定內容"/>
</body> 
</html>

上面的程式碼實現了我們的要求，能夠實現相容所有主流瀏覽器，下面介紹一下它的實現過程。

一.程式碼註釋:

1.isupportTbodyInnerHTML是一個布林值如果是true則說明支援，否則不支援，具體可以參閱js如何判斷當前瀏覽器tbody是否支援innerHTML一章節。

2.function setTBodyInnerHTML(tbody,html){}，用來實現IE6-IE9下的innerHTML效果，第一個引數是tbody物件，第二個是要設定的html內容。

3.var div=document.createElement('div')，建立一個div元素物件。

4.div.innerHTML='<table>'+html+'</table>'，將div中的內容設定為表格和要新增的指定內容。

5.while(tbody.firstChild){tbody.removeChild(tbody.firstChild)}，刪除tbody下的所有子元素。

6.tbody.appendChild(div.firstChild.firstChild),為tbody元素附加div下子元素的子元素，這裡也就是div>table>tr。

二.相關閱讀:

1.createElement()函式可以參閱js createElement()一章節。 

2.innerHTML屬性可以參閱js innerHTML一章節。

3.try catch語句可以參閱javascript的try...catch...finally異常處理一章節。

相關文章