IE9和IE9以下瀏覽器tbody無法使用innerHTML解決方案

antzone發表於2017-03-29
IE9瀏覽器HTML

本章節介紹一table表格的tbody元素的一個特點，那就是在IE9和IE9以下瀏覽器中，無法使用innerHTML設定元素的html內容，但是可以獲取元素的html內容，下面就通過程式碼例項介紹一下如何解決此問題。

先看一段程式碼例項:

[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];
  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>螞蟻部落</td></tr> 
</tbody> 
</table> 
<button id="btGet">獲取內容</button>
<button id="btSet">設定內容</button> 
</body> 
</html>

在上面的程式碼中，可以在所有的主流瀏覽器中獲取tbody下面的html內容，但是卻無法設定。

下面就介紹一下此問題的解決方案，希望能夠給需要的朋友帶來幫助。

最好的方式就是首先檢測一下是否支援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 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>螞蟻部落</td></tr> 
</tbody> 
</table> 
<button id="btSet">設定內容</button> 
</body> 
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

1.window.onload=function(){}，文件內容完全載入完畢再去執行函式中的程式碼。2.var tbody=document.getElementsByTagName('tbody')[0]，獲取第一個tbody元素物件。

3. var isupportTbodyInnerHTML=function(){}()，函式可以返回一個布林值用來說明當前瀏覽器是否支援tbody的innerHTML屬性。

4.var table=document.createElement('table')，建立一個table元素物件。5.var tbody = document.createElement('tbody')，建立一個tbody元素物件。

6.table.appendChild(tbody)，將tbody新增到table中。

7.var boo = true，設定一個變數並賦初值為true。

8.try{

  tbody.innerHTML='<tr></tr>'

} 

catch(e){

  boo = false

}，如果支援innerHTML,那麼就使用它正常賦值，否則會報錯跳入catch語句，這樣的話boo就會被賦值false。

9.return boo，返回boo。

10.function setTBodyInnerHTML(tbody, html)，此函式可以實現相容效果，第一個引數是tbody元素物件，第二個引數是要設定的內容html字串。

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

12.div.innerHTML='<table>'+html+'</table>'，html字串。

13.tbody.parentNode.replaceChild(div.firstChild.firstChild,tbody)，進行替換相關操作，需要特別注意的是div.firstChild.firstChild很多人以為是tr元素，其實並不是，而是tbody，因為如果一個表格沒有人為新增tbody的話，瀏覽器會預設給其新增一個。

二.相關閱讀:

1.getElementsByTagName()函式可以參閱document.getElementsByTagName()一章節。

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

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

4.replaceChild()函式可以參閱javascript replaceChild()一章節。

相關文章