调试IE8中的Javascript替换innerHTML运行时错误

Question

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>";

这行代码会导致 未知的运行时错误

- SandHurst

Answer 1

你不能直接设置表格的innerHTML的值，你需要访问其子单元格或行并修改它们：

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

更多信息/示例: Table, TableHeader, TableRow, TableData对象

- ScarletGarden

---

实际上，在IE8中，它的意思是document.getElementById(tabid).rows[0].cells[0].innerHTML = 'blah blah';。 - Stefan Steiger

如果我想在事件中使用JS更改表格结构，例如将4行变为3行，该怎么办？ - Saif

Answer 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。

- Paul

---

为什么我还要费心呢。该死的板子把我的示例代码吃掉了一半。 - Paul

Answer 3

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

因此，如果您尝试为这些元素设置innerHTML，则IE8会通知未知运行时错误。

更多详细信息请参见：http://msdn.microsoft.com/en-us/library/ms533897%28VS.85%29.aspx。

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

- Giulio Roggero

---

至少在IE8+中，您可以使用以下代码更改标题元素：document.getElementsByTagName('title')[0].text = '我的标题'; - Andrew Childs

@Andrew 通过在不同的框架中使用<script>解决了我的问题。 - user123444555621

图例元素也是只读的。谢谢您发布这个，帮了我大忙！ - Dave DeHaan

Answer 4

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

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

我不太认为这是HTML格式错误；看起来更像是IE8的另一个bug。

- Boubacar

---

<p>标签不应该嵌套，这是HTML规范。但IE8阻止它似乎有点多余！ - Fiona - myaccessible.website

遇到了与 p 标签相同的问题。将其更改为 div，一切都正常工作了。 - Matthias Kleine

Answer 5

很好，我也遇到了设置innerHTML的相同情况。当我阅读这篇文章时，我意识到其中一个元素是TR，而另一个元素是TD，而TD可以正常工作。

将代码更改为它们都是TD可以解决问题，这意味着这是一个相当不明显的问题，由表格的结构引起。

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

我相信IE可以给出更详细的错误消息，因为DOM在运行时发生变化并且似乎奇怪的是只有表格才会引发错误，这种情况应该并不常见。

- Theo

Answer 6

哦，对了 - 记得 HTML 结构必须有效。

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

所以记住 HTML 结构！

- aliceraunsbaek

Answer 7

在使用YUI时，请尽量使用

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

改为：

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

- Joris Kok

Answer 8

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

- Fulg

Answer 9

为什么在IE中会发生这种情况...

案例：

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

解决方案：

永远不要将嵌套的div放置在表单标签之间以操作其内容... :)

- musmanjaved

Answer 10

这不是一个大问题，因为我几天前也遇到了同样的问题，导致ie出现这个错误的原因是 - 我们的html格式存在错误或者你正在使用一个元素来替换innerHTML，而ie只能使用<td>，不要使用表格、div等来替换innerHTML。

• SwapnilK

- Swapnil