IE6-IE9不支持table.innerHTML的解決方法分享
更新時(shí)間：2012年09月14日 15:29:47 作者：
讓ie6-ie9支持table.innerHTML，其實(shí)這里只是對(duì)table做了處理，對(duì)其他不支持的元素可以用類似的方案
測(cè)試代碼：
<table id="test">
</table>
<script>
var oTable=document.getElementById("test");
oTable.innerHTML="<tr><td>innerHTML</td></tr>";
</script>
上述代碼在IE6-9中無效，直接報(bào)錯(cuò)：
IE9：Invalid target element for this operation.
IE6-8：Unknown runtime error
查找IE的文檔(http://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx)后發(fā)現(xiàn)有這么一段：
var oTable=document.getElementById("test");
//oTable.innerHTML="<tr><td>innerHTML</td></tr>";
setTableInnerHTML(oTable,"<tr><td>innerHTML</td></tr>");
function setTableInnerHTML(table, html) {
if(navigator && navigator.userAgent.match(/msie/i)){
var temp = table.ownerDocument.createElement('div');
temp.innerHTML = '<table><tbody>' + html + '</tbody></table>';
if(table.tBodies.length == 0){
var tbody=document.createElement("tbody");
table.appendChild(tbody);
}
table.replaceChild(temp.firstChild.firstChild, table.tBodies[0]);
} else {
table.innerHTML=html;
}
}
這里只是對(duì)table做了處理，對(duì)其他不支持的元素可以用類似的方案。
另外，IE10中table已經(jīng)支持innerHTML了。
作者：Artwl
復(fù)制代碼 代碼如下:
<table id="test">
</table>
<script>
var oTable=document.getElementById("test");
oTable.innerHTML="<tr><td>innerHTML</td></tr>";
</script>
上述代碼在IE6-9中無效，直接報(bào)錯(cuò)：
IE9：Invalid target element for this operation.
IE6-8：Unknown runtime error
查找IE的文檔(http://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx)后發(fā)現(xiàn)有這么一段：
所以只能用其他方案解，我的方案：The innerHTML property is read-only on the col, colGroup, frameSet, html, head, style, table, tBody, tFoot, tHead, title, and tr objects.
復(fù)制代碼 代碼如下:
var oTable=document.getElementById("test");
//oTable.innerHTML="<tr><td>innerHTML</td></tr>";
setTableInnerHTML(oTable,"<tr><td>innerHTML</td></tr>");
function setTableInnerHTML(table, html) {
if(navigator && navigator.userAgent.match(/msie/i)){
var temp = table.ownerDocument.createElement('div');
temp.innerHTML = '<table><tbody>' + html + '</tbody></table>';
if(table.tBodies.length == 0){
var tbody=document.createElement("tbody");
table.appendChild(tbody);
}
table.replaceChild(temp.firstChild.firstChild, table.tBodies[0]);
} else {
table.innerHTML=html;
}
}
這里只是對(duì)table做了處理，對(duì)其他不支持的元素可以用類似的方案。
另外，IE10中table已經(jīng)支持innerHTML了。
作者：Artwl
相關(guān)文章
原生JavaScript實(shí)現(xiàn)簡(jiǎn)單五子棋游戲
這篇文章主要為大家詳細(xì)介紹了原生JavaScript實(shí)現(xiàn)簡(jiǎn)單五子棋游戲，文中示例代碼注釋的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)笑臉評(píng)分功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
原生JavaScript實(shí)現(xiàn)remove()和recover()功能示例
這篇文章主要介紹了原生JavaScript實(shí)現(xiàn)remove()和recover()功能,結(jié)合實(shí)例形式分析了javascript實(shí)現(xiàn)類似jQueryremove()和recover()功能的自定義函數(shù),需要的朋友可以參考下2018-07-07
JavaScript基于activexobject連接遠(yuǎn)程數(shù)據(jù)庫(kù)SQL Server 2014的方法
這篇文章主要介紹了JavaScript基于activexobject連接遠(yuǎn)程數(shù)據(jù)庫(kù)SQL Server 2014的方法,結(jié)合實(shí)例形式分析了javascript使用activexobject遠(yuǎn)程連接數(shù)據(jù)庫(kù)的相關(guān)操作技巧,需要的朋友可以參考下2017-07-07
csdn 博客中實(shí)現(xiàn)運(yùn)行代碼功能實(shí)現(xiàn)
有時(shí)候因?yàn)閏sdn的博客經(jīng)常處理一些字符，導(dǎo)致代碼很多情況下，都不能正常運(yùn)行，給大家的閱讀帶來了麻煩，下面是腳本之家編輯簡(jiǎn)單的整理下。2009-08-08
JavaScript獲取數(shù)據(jù)類型的方法詳解
這篇文章給大家介紹了JavaScript獲取數(shù)據(jù)類型的方法,文中所介紹的所有知識(shí)點(diǎn)、代碼示例以及提供的解決方案,均不考慮?IE?瀏覽器,僅支持最新版本的?Chrome、Firefox、Edge?和?Safari?瀏覽器,需要的朋友可以參考下2024-02-02
如何用JS判斷數(shù)組中是否存在某個(gè)值或者某個(gè)對(duì)象的值
數(shù)組是我們編程中經(jīng)常使用的的數(shù)據(jù)結(jié)構(gòu)之一,在處理數(shù)組時(shí)，我們經(jīng)常需要在數(shù)組中查找特定的值,下面這篇文章主要給大家介紹了關(guān)于如何用JS判斷數(shù)組中是否存在某個(gè)值或者某個(gè)對(duì)象的值的相關(guān)資料,需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細(xì)介紹了js編寫輪播圖效果的代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
使用Fetch API時(shí)獲取404錯(cuò)誤的解決方案
在現(xiàn)代Web開發(fā)中,Fetch API 是用于執(zhí)行網(wǎng)絡(luò)請(qǐng)求的主要工具之一,它提供了一種基于Promise的簡(jiǎn)潔語法,使得異步操作更加直觀和易于管理,本文將詳細(xì)探討在使用Fetch API時(shí)獲取404錯(cuò)誤的原因、如何檢測(cè)和處理這些錯(cuò)誤,以及最佳實(shí)踐,需要的朋友可以參考下2024-12-12
網(wǎng)站接入QQ登錄，首先引入授權(quán)js文件，這個(gè)需要提交申請(qǐng)的，通過之后按照下面的步驟進(jìn)行操作就可以了2014-07-07