innerHTML似乎是唯一好的解决方案



我有一个创建HTML/CSS消息框的函数,我想在其中显示一个变量(已经用PHP json_encode()转义了,不可能注入XSS)。我想在硬编码消息中显示此变量,它始终是相同的消息。该消息在 HTML 粗体标记<b></b>之间显示此变量:

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

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

很多人说"不要使用innerHTML,它没有规范化","这是一个Microsoft专有功能,它不是W3C,可能不再受支持"。

我一直使用 DOM 方法,但就我而言,DOM1 myDiv.firstChild.nodeValue 属性甚至 DOM3 myDiv.textContent 方法都不起作用,因为字符串仅显示为文本。

innerHTML 方法的优点是不会转义带有 HTML 实体的<>字符,不幸的是,我认为使用 DOM 方法不可能获得相同的结果。

我不能使用 document.createElement("b") 方法,它会使一切复杂化,因为希望我的 Message() 函数将完整样式的字符串作为一个参数获取。

所以我的想法是,在某些情况下需要使用innerHTML,而不是使事情复杂化,这不是一个糟糕的做法,这取决于你如何使用它。

欢迎评论。

大多数反对innerHTML的讨论都已经过时了。 innerHTML几乎得到普遍支持(IE中有一些狭窄的兼容性问题),现在是HTML5草案的一部分,比DOM方法快得多(EDIT:或不编辑,见注释),并且会产生更干净的代码。

你想做的事情是可能的,没有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 的数组)而不是文本字符串。 总而言之,我会说这绝对不值得 - 除非你的目标是IE5

是的。您可以阅读有关innerHTML与其他方法的舒缓怪癖模式基准测试。

我相信

.innerHTML很好用。在此处查看兼容性统计信息:http://www.quirksmode.org/dom/w3c_html.html,它们还突出显示了使用此方法而不是 DOM 方法的性能提升。

最新更新