无法在IE中的tbody上设置innerHTML

Question

我有一个这样的表：

<table>
<thead>
    <tr>
        <th colspan="1">a</th>
        <th colspan="3">b</th>
    </tr>
</thead>
<tbody id="replaceMe">
    <tr>
        <td>data 1</td>
        <td>data 2</td>
        <td>data 3</td>
        <td>data 4</td>
    </tr>
</tbody>
</table>

在ajax请求之后，有一个方法向我返回了以下内容：

<tr>
    <td>data 1 new</td>
    <td>data 2 new</td>
    <td>data 3 new</td>
    <td>data 4 new</td>
</tr>

我想像这样更改innerHTML

document.getElementById('replaceMe').innerHTML = data.responseText;

但是，似乎IE无法在上设置innerHTML <tbody>。谁能为我提供一个解决此问题的简单方法？

Answer 1

没错，tbody元素上的innerHTML在IE中是readOnly

对于除以下对象以外的所有对象，该属性均为可读/写状态；对于以下对象，该属性为只读：COL，COLGROUP，FRAMESET，HEAD，HTML，STYLE，TABLE，TBODY，TFOOT，THEAD，TITLE，TR。

您可以执行以下操作来解决此问题：

function setTBodyInnerHTML(tbody, html) {
  var temp = tbody.ownerDocument.createElement('div');
  temp.innerHTML = '<table>' + html + '</table>';

  tbody.parentNode.replaceChild(temp.firstChild.firstChild, tbody);
}

基本上，它将创建一个临时节点，您将在其中注入fulltable。然后，它取代了tbody与tbody从注入table。如果事实证明它很慢，则可以通过缓存temp而不是每次都创建它来使其更快。