IE9中的innerHTML追加

Posted

技术标签:

【中文标题】IE9中的innerHTML追加【英文标题】:innerHTML append in IE9 【发布时间】:2012-07-08 10:53:19 【问题描述】:

我有一个页面只是尝试在 javascript 函数中执行以下操作:

document.getElementById("chatTable").innerhtml += "<tr><td colspan=\"3\">      ⏎
    <span color=\"purple\">------------Switched to channel: " + channelName +  ⏎
    "------------</span></td></tr>";

这适用于我尝试过的所有其他浏览器(Firefox、Chrome、Safari、android 手机浏览器、iPhone 浏览器),但不适用于 IE9。是的,我确实有一个 ID 为 chatTable 的表,并且确实设置了 channelName 变量。我知道我可能实际上可以使用 DOM 为表对象附加一个表行(我认为它是 insertRow() 或其他东西),但现在它只是一个原则问题,它让我发疯了。我尝试将+= 更改为=,但没有运气。我还尝试在javascript中将表格设置为自己的变量,然后尝试编辑innerHTML,但仍然没有运气。哦,我确实有:

<!DOCTYPE HTML>

在我的页面中。我做错了什么?!

【问题讨论】:

加载文档后是否执行了 Javascript 文件?浏览器的开发控制台有什么错误吗? 【参考方案1】:

您不能将.innerHTML.outerHTML 与以下任何元素一起使用:COL、COLGROUP、FRAMESET、HTML、STYLE、TABLE、TBODY、TFOOT、THEAD、TITLE 或 TR。

请参阅Building Tables Dynamically 以使用 Microsoft 的表对象模型来操作 Internet Explorer 中的表。

我想这可能会在 IE 的未来版本中发生变化,但这是你现在剩下的。

【讨论】:

感谢您为我解决这个问题!我现在正在用 javascript 构建表格,而不是附加到 innerHTML,它工作得很好。【参考方案2】:

除了 Jim 的回答之外,当您附加 HTML 时,您会破坏并重建现有的表。即使在允许您这样做的浏览器中,添加行的通常更好的解决方案是:

var table = document.getElementById("chatTable"),
    row = table.insertRow(-1), //-1 means at end
    cell = row.insertCell(0),
    span = document.createElement("span");

span.style.color = "purple";
span.appendChild(document.createTextNode("------------Switched to channel: " + channelName + "------------"));
cell.colSpan = 3;
cell.appendChild(span);
row.appendChild(cell);
table.appendChild(row);

它通常更快,并且您不会丢失任何已附加到表中事物的现有事件处理程序。

【讨论】:

感谢您的代码!工作精美。一个注释虽然 setAttribute("color", "purple");不行,你需要做: setAttribute("style", "color:purple;");但除此之外,它很完美,谢谢!

以上是关于IE9中的innerHTML追加的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 innerHTML/innerText 将内容附加到 querySelectorAll 元素?

求助如何使用js向div追加html代码

语法中的 innerHTML 错误不起作用;未捕获的 TypeError:无法设置 null 的属性(设置“innerHTML”)[重复]

JQuery 中的 innerHTML 等价物是啥? [复制]

Javascript中的innerText和InnerHTML

JQuery中的文本与innerHTML