innerHTML在早期IE版本不支持的問題-优快云博客

本文探讨了在Internet Explorer浏览器中使用innerHTML属性修改table元素的问题。由于innerHTML在某些元素上为只读，直接修改会导致错误。文章提供了两种解决方案：一是通过DOM方法创建元素并插入；二是利用辅助div进行转换。

前两天在在页面时需要动态创建table，由于需要动态生成行，于是偷懒使用了innerHTML属性

自己习惯使用FF，无意中使用IE打开竟发现报错了。

debug了一下发现是innerHTML搞得鬼。

在MSDN下找到了下面的描述：

https://msdn.microsoft.com/en-us/library/ms533897%28v=vs.85%29.aspx

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

即在上述元素中，innerHTML属性是为只读的，我们不能直接使用innerHTML来改变它们的行为。

解决方法：

1, 使用DOM方法{createElement, appendChild, etc.}. 但需覺得，在IE9-中，你可以使用 (table > tr > td)的 html代碼結構來創建表格，但是用javascript來創建DOM時，你必須使用 (table > tbody > tr > td)的結構。IE不會拋出錯誤，但是不會渲染出table出來。

2,使用輔助div

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;
        }
}