小编典典

无法在IE中的tbody上设置innerHTML

javascript

我有一个这样的表:

<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>。谁能为我提供一个解决此问题的简单方法?


阅读 371

收藏
2020-05-01

共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。然后,它取代了tbodytbody从注入table。如果事实证明它很慢,则可以通过缓存temp而不是每次都创建它来使其更快。

2020-05-01