javascript - IE9 无法正确找到 DOM 元素

Question

我有一个 HTML 表格，其中包含 <tfoot>我正在尝试动态更新。在 Firefox 中，此脚本执行良好:

 dataTableFooter = document.getElementById('dataTable').getElementsByTagName('tfoot');
 dataTableFooter[0].innerHTML = "This is the footer";

但是在 IE 中返回以下错误:

SCRIPT600: Invalid target element for this operation. 

在 FF 中导航 DOM:

在 IE 中 - 我们可以看到元素的结构是不同创建的，所以dataTableFooter[0].innerHTML将是无效的:

我无法为我的表页脚分配一个 id，因为它是通过 Alloy UI 框架生成的，并且始终是随机的，否则这不会成为问题 - 任何关于如何执行此操作的跨浏览器解决方案 <tfoot>可以检索元素并且 innerHTML设置？

更新:这是 IE9 及以下版本的问题

Answer 1

我假设您的目标是 IE9，因为这在 IE10+ 中不是问题。

在 IE9 中，您可以清除 tfoot 的 innerHTML，但无法设置它。但是，您可以创建一个新元素，并将其作为子元素附加:

var dataTableFooter= document.getElementById('dataTable').getElementsByTagName('tfoot');

var div= document.createElement('td');
div.innerHTML= 'This is the footer';
dataTableFooter[0].innerHTML= '';
dataTableFooter[0].appendChild(div);

Working Fiddle