IE下table元素的innerHTML问题

2017年09月16日Web前端0

在向页面添加元素的时候,我们经常会用到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元素了。