IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解决方案

最新推荐文章于 2019-01-12 18:00:00 发布

wintersweetzeng

最新推荐文章于 2019-01-12 18:00:00 发布

阅读量3.8k

点赞数 1

分类专栏： ie 8 innerhtml 文章标签： ie 8

ie 8 innerhtml 专栏收录该内容

1 篇文章

订阅专栏

最近发现各大类库都能利用xxx.innerHTML=HTML片断来生成节点元素，再把它们插入到目标元素的各个位置上。这东西实际上就是insertAdjacentHTML，但是IE可恶的innerHTML把这优势变成劣势。

id="cproIframe_u1892994_2" width="580" height="90" src="http://pos.baidu.com/acom?adn=3&at=231&aurl=&cad=1&ccd=24&cec=GBK&cfv=18&ch=0&col=zh-CN&conBW=0&conOP=1&cpa=1&dai=2&dis=0&ltr=https%3A%2F%2Fwww.baidu.com%2Flink%3Furl%3D1Na79o2KsYxvByIjCeMFPvY0k9loSipUI0sZK9DShUGHw2vs-ZGTDv2loqp-606F%26wd%3D%26eqid%3D858755970000917b0000000355e67125&ltu=http%3A%2F%2Fwww.jb51.net%2Farticle%2F50620.htm&lu_161=0&lunum=6&n=jb51_cpr&pcs=1263x855&pis=10000x10000&ps=516x166&psr=1280x1024&pss=1263x517&qn=f1da234364326a56&rad=&rsi0=580&rsi1=90&rsi5=4&rss0=%23FFFFFF&rss1=%23F7FCFF&rss2=%230000ff&rss3=%23444444&rss4=%23008000&rss5=&rss6=%23e10900&rss7=&scale=&skin=tabcloud_skin_3&stid=5&td_id=1892994&titFF=%E5%AE%8B%E4%BD%93&titFS=12&titTA=left&tn=text_default_580_90&tpr=1441165611379&ts=1&version=2.0&xuanting=0&dtm=BAIDU_DUP2_SETJSONADSLOT&dc=2&di=u1892994&ti=IE6%2FIE7%2FIE8%2FIE9%E4%B8%ADtbody%E7%9A%84innerHTML%E4%B8%8D%E8%83%BD%E8%B5%8B%E5%80%BC%E7%9A%84%E5%AE%8C%E7%BE%8E%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88_%E7%BB%8F%E9%AA%8C%E4%BA%A4%E6%B5%81_%E8%84%9A%E6%9C%AC%E4%B9%8B%E5%AE%B6&tt=1441165611369.36.49.49" align="center,center" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" allowtransparency="true">

IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值，重现代码如下

复制代码代码如下:

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

可以利用特性判断来看浏览器是否支持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)

对于IE6-IE9里如果要设置tbody的innerHTML，可以使用如下替代方法

复制代码代码如下:

 
 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方法替换

复制代码代码如下:

 
 function setTBodyInnerHTML(tbody, html) { 
  
     var div = document.createElement('div') 
  
     div.innerHTML = '<table>' + html + '</table>' 
  
     tbody.parentNode.replaceChild(div.firstChild.firstChild, tbody) 
  
 }

从MSDN上记录上看 col、colGroup、frameset、html、head、style、table、tfoot、tHead、title和tr的innerHTML都是只读的（IE6-IE9）。

The innerHTML property is read-only on the col, colGroup, frameSet, html, head, style, table, tBody, tFoot, tHead, title, and tr objects.

You can change the value of the title element using the document.title property.

To change the contents of the table, tFoot, tHead, and tr elements, use the table object model described in Building Tables Dynamically. However, to change the content of a particular cell, you can use innerHTML.