无法在 IE 中的 tbody 上设置 innerHTML

问题描述

我有一张这样的桌子:

<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请求后返回以下内容:

and a method returns me the following after an ajax request:

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

我想像改变innerHTML一样

I want to change the innerHTML like

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

不过，IE好像不能在上设置innerHTML.任何人都可以帮我解决这个问题的简单方法吗?

However, it seems that IE can't set innerHTML on <tbody>. Can anyone help me with a simple workaround for this issue?

推荐答案

确实如此，tbody元素上的innerHTML在IE中是只读的

That is true, innerHTML on tbody elements is readOnly in IE

该属性对所有人都是可读/可写的除以下对象外，对于它是只读的:COL、COLGROUP、框架、头部、HTML、样式、表格、TBODY、TFOOT、THEAD、TITLE、TR.

来源:http://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx

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

You can do something like this to work around it:

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

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

基本上它会创建一个临时节点，您可以在其中注入一个完整的table.然后它将 tbody 替换为注入的 table 中的 tbody.如果证明它很慢，您可以通过缓存 temp 而不是每次都创建它来使其更快.

Basically it creates a temporary node into which you inject a full table. Then it replaces the tbody with the tbody from the injected table. If it proves to be slow, you could make it faster by caching temp instead of creating it each time.

这篇关于无法在 IE 中的 tbody 上设置 innerHTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！