[笔记]IE下table元素的innerHTML问题

在向页面添加元素的时候，我们经常会用到DOM的innerHTML这个属性，但在IE下的table元素中使用，结果，并不是我们想要的。

一、现象

<table id="table"></table>

<script type="text/javascript">
var oTable = document.getElementById('table');
oTable.innerHTML = '<tr><td>11</td><td>11</td></tr><tr><td>22</td><td>22</td></tr>';
</script>

在chrome和FF下，都是能够正常显示这个table以及其内部的数据的。

但在IE9-(包括9)下，会有以下报错：

SCRIPT600: 该操作的目标元件无效。

查询对应得文档：

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

也就是说table的innerHTML属性是只读的。

二、解决方法

既然table元素不支持innerHTML修改dom的方式，我们只能老老实实的使用原生的appendChild、createElement方法来处理了。

当然，IE10及以上已经支持innerHTML来操作table元素了。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!