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 元素？
语法中的 innerHTML 错误不起作用；未捕获的 TypeError：无法设置 null 的属性（设置“innerHTML”）[重复]
JQuery 中的 innerHTML 等价物是啥？ [复制]