IE6-IE9不支持table.innerHTML的解決方法分享
更新時間：2012年09月14日 15:29:47 作者：
讓ie6-ie9支持table.innerHTML，其實這里只是對table做了處理，對其他不支持的元素可以用類似的方案
測試代碼：
<table id="test">
</table>
<script>
var oTable=document.getElementById("test");
oTable.innerHTML="<tr><td>innerHTML</td></tr>";
</script>
上述代碼在IE6-9中無效，直接報錯：
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;
}
}
這里只是對table做了處理，對其他不支持的元素可以用類似的方案。
另外，IE10中table已經(jīng)支持innerHTML了。
作者：Artwl
復制代碼 代碼如下:
<table id="test">
</table>
<script>
var oTable=document.getElementById("test");
oTable.innerHTML="<tr><td>innerHTML</td></tr>";
</script>
上述代碼在IE6-9中無效，直接報錯：
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.
復制代碼 代碼如下:
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;
}
}
這里只是對table做了處理，對其他不支持的元素可以用類似的方案。
另外，IE10中table已經(jīng)支持innerHTML了。
作者：Artwl
相關文章
這篇文章主要為大家詳細介紹了原生JavaScript實現(xiàn)簡單五子棋游戲，文中示例代碼注釋的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)笑臉評分功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
原生JavaScript實現(xiàn)remove()和recover()功能示例
這篇文章主要介紹了原生JavaScript實現(xiàn)remove()和recover()功能,結合實例形式分析了javascript實現(xiàn)類似jQueryremove()和recover()功能的自定義函數(shù),需要的朋友可以參考下2018-07-07
JavaScript基于activexobject連接遠程數(shù)據(jù)庫SQL Server 2014的方法
這篇文章主要介紹了JavaScript基于activexobject連接遠程數(shù)據(jù)庫SQL Server 2014的方法,結合實例形式分析了javascript使用activexobject遠程連接數(shù)據(jù)庫的相關操作技巧,需要的朋友可以參考下2017-07-07
csdn 博客中實現(xiàn)運行代碼功能實現(xiàn)
有時候因為csdn的博客經(jīng)常處理一些字符，導致代碼很多情況下，都不能正常運行，給大家的閱讀帶來了麻煩，下面是腳本之家編輯簡單的整理下。2009-08-08
JavaScript獲取數(shù)據(jù)類型的方法詳解
這篇文章給大家介紹了JavaScript獲取數(shù)據(jù)類型的方法,文中所介紹的所有知識點、代碼示例以及提供的解決方案,均不考慮?IE?瀏覽器,僅支持最新版本的?Chrome、Firefox、Edge?和?Safari?瀏覽器,需要的朋友可以參考下2024-02-02
如何用JS判斷數(shù)組中是否存在某個值或者某個對象的值
數(shù)組是我們編程中經(jīng)常使用的的數(shù)據(jù)結構之一,在處理數(shù)組時，我們經(jīng)常需要在數(shù)組中查找特定的值,下面這篇文章主要給大家介紹了關于如何用JS判斷數(shù)組中是否存在某個值或者某個對象的值的相關資料,需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細介紹了js編寫輪播圖效果的代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
在現(xiàn)代Web開發(fā)中,Fetch API 是用于執(zhí)行網(wǎng)絡請求的主要工具之一,它提供了一種基于Promise的簡潔語法,使得異步操作更加直觀和易于管理,本文將詳細探討在使用Fetch API時獲取404錯誤的原因、如何檢測和處理這些錯誤,以及最佳實踐,需要的朋友可以參考下2024-12-12
網(wǎng)站接入QQ登錄，首先引入授權js文件，這個需要提交申請的，通過之后按照下面的步驟進行操作就可以了2014-07-07