innerHTML似乎是唯一的解决方案

Question

我有一个创建HTML / CSS MessageBox的函数，我想在其中显示一个变量（已经使用PHP json_encode（）进行了转义，无法进行XSS注入）。 我想在硬编码的消息中显示此变量，它始终是相同的消息。 该消息在HTML粗体标记<b></b>：

之间显示此变量

Message("Do you really want to delete <b>" + reference + "</b> ?");

传递给Message（）函数的字符串将添加到div标记中，我唯一的解决方案是使用innerHTML，如果我希望变量引用以粗体显示。

很多人说“不要使用innerHTML它没有规范化”，“它是微软专有的功能，它不是W3C，可能不再受支持”。

我一直使用DOM方法但在我的情况下，DOM1 myDiv.firstChild.nodeValue属性甚至DOM3 myDiv.textContent方法都不起作用，因为字符串只显示为文本。

innerHTML方法的优点是不会使用HTML实体转义<>个字符，遗憾的是我认为使用DOM方法无法获得相同的结果。

我不能使用document.createElement（“b”）方法，因为希望我的Message（）函数将完整样式的字符串作为一个参数，所以它会使一切变得复杂。

所以我的想法是在某些情况下需要使用innerHTML而不是使事情复杂化，这取决于你如何使用它并不是一种坏习惯。

赞赏。

Answer 1

针对innerHTML的大多数讨论都已经过时了。 innerHTML几乎得到普遍支持（在IE中存在一些窄的兼容性问题），现在是HTML5 draft的一部分，比much faster的DOM方法（编辑：或者不，请参阅评论），并使代码更清晰。

你想做什么是可能的没有innerHTML，但它并不漂亮：

var div = document.createElement("div");
var b = document.createElement("b");
b.appendChild(document.createTextNode(reference));
div.appendChild(document.createTextNode("Do you really want to delete "));
div.appendChild(b);
div.appendChild(document.createTextNode("?"));
Message(div);

并且你必须重构你的Message函数来获取DOM Node（或Node s的数组）而不是文本字符串。总而言之，我会说这绝对不值得 - 除非你的目标是IE5

Answer 2

是。您可以阅读innerHTML与其他方法相关的舒缓quirksmode benchmark。

Answer 3

我相信.innerHTML可以使用。在这里查看兼容性统计信息：http://www.quirksmode.org/dom/w3c_html.html，它们还强调了使用此方法而不是DOM方法的性能提升。