调试 IE8 Javascript 替换 innerHTML 运行时错误答案

【问题标题】：Debugging IE8 Javascript Replace innerHTML Runtime Error调试 IE8 Javascript 替换 innerHTML 运行时错误
【发布时间】：2010-10-08 01:03:49
【问题描述】：

function DeleteData(ID)
{
 var ctrlId=ID.id;

 var divcontents=document.getElementById(ctrlId).innerHTML;
 var tabid=ctrlId.replace(/div/,'tab');
 var tabcontents=document.getElementById(tabid).innerHTML;
 alert(document.getElementById(tabid).innerHTML);
 document.getElementById(tabid).innerHTML="<TBody><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr></TBody>";
 document.getElementById(ctrlId).innerHTML='';

}

我正在尝试用空表替换表，但是

document.getElementById(tabid).innerHTML="<TBody><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr></TBody>";

这条线导致Unknown Runtime Error

【问题讨论】：

标签： javascript debugging innerhtml

【解决方案1】：

您不能为表格的 innerHTML 设置值，您应该访问子单元格或行并像这样更改它们：

document.getElementById(tabid).rows[0].cells.innerHTML = 'blah blah';

更多信息/示例：Table, TableHeader, TableRow, TableData Objects

【讨论】：

实际上，在 IE8 中是 document.getElementById(tabid).rows[0].cells[0].innerHTML = 'blah blah';
如果我想更改表结构我的意思是使用 js 在事件中从 4 行中创建 3 行。

【解决方案2】：

在 IE8 中，当尝试从对象内触发的代码时，您无法更改对象的 innerHTML。

例如：

<span id='n1'>
  <input type=button value='test' onclick='DoSomething(this);'>
</span>

将以下代码隐藏在文档的某个偏远角落：

<script type='text/javascript'>
  function DoSomething(element)
  {
    document.getElementById("n1").innerHTML = "This is a test"
  }
</script>

这将失败并出现错误未知的运行时错误。我相信这与您试图替换触发当前执行行的 HTML 代码这一事实有关。 onclick 事件是被 DoSomething 函数替换的代码的一部分。 IE8 不喜欢这样。

我通过将计时器事件设置为 250 毫秒解决了我的问题，这样在 250 毫秒结束时调用的函数将替换 span 的 innerHTML。

【讨论】：

呸，我为什么要打扰。该死的董事会吃了我的一半。

【解决方案3】：

我发现在 IE8 中有些元素是只读的：COL、COLGROUP、FRAMESET、HEAD、HTML、STYLE、TABLE、TBODY、TFOOT、THEAD、TITLE、TR。

因此，如果您尝试为这些元素设置 innerHTML，IE8 会通知 alter with Unknown Runtime Error。

更多详情请点击此处：http://msdn.microsoft.com/en-us/library/ms533897%28VS.85%29.aspx。

最简单的方法是将只读元素转换为div元素。

【讨论】：

至少用IE8+title元素，你可以这样做：document.getElementsByTagName('title')[0].text = 'My Title';
@Andrew 也解决了我在不同框架中使用 <script> 的问题
图例元素也是只读的。感谢您发布此信息，救了我！

【解决方案4】：

我遇到了同样的问题，但我的错误是因为我在 p 元素下面直接插入了一个 p 标记，如下所示：

document.getElementById('p-element').innerHTML = '<p>some description</p>';

我真的不明白这是怎么回事 HTML 格式错误；看起来更像是另一个 IE8 错误。

【讨论】：

标签不应嵌套，它在 HTML 规范中。 IE8 完全没有必要阻止它！
对 p 标签也有同样的问题。将其更改为 div，一切正常。

【解决方案5】：

太好了，我在设置innerHTML 时遇到了同样的情况。当我读到这篇文章时，我意识到其中一个元素是 TR，一个是 TD，而 TD 正在工作。

更改代码使它们都是TDs 修复它，这意味着它是由表结构引起的相当不明显的问题。

当我开始更改表格行时，它可能会使 DOM 出错，因为它不能再将表格存储为数组。

我确信 IE 可以提供更多信息性的错误消息，因为动态更改 DOM 并不少见，而且这只会引发表错误似乎很奇怪。

【讨论】：

【解决方案6】：

哦，是的 - 请记住 HTML 结构必须有效。

我尝试将整个页面加载到 <p> 标记中 - 它失败了（显然），将其更改为 <div> 标记解决了我的问题！

所以记住 HTML 结构！

【讨论】：

【解决方案7】：

为什么会在 IE 中发生...

案例场景：

访问 Div 中的 Div 以添加 ajax 内容时，IE 中的 Javascript 未知运行时错误。

解决方案：

永远不要在表单标签之间放置嵌套的 div 来播放其中的内容.. :)

【讨论】：

【解决方案8】：

在使用 YUI 时尝试使用

Y.one('#'+data.id).setContent(html);

代替：

Y.one('#'+data.id).set('innerHTML' , html);

【讨论】：

【解决方案9】：

如果您需要将 innerHTML 设置为 ""（空字符串），那么您可以使用 removeChild 代替

【讨论】：

【解决方案10】：

这不是一个大问题，因为我几天前遇到了同样的问题以及这个错误的原因发生在 ie 中的原因是 - 我们的 html 格式存在错误，或者您使用 <td> 以外的元素替换 innerHTML 即仅使用，不要使用表格、div 替换 innerHTML。

SwapnilK

【讨论】：