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

标签 javascript html dom innerhtml

我有一个函数创建一个 HTML/CSS MessageBox,我想在其中显示一个变量(已经用 PHP json_encode() 转义,不可能进行 XSS 注入(inject))。 我想在硬编码消息中显示此变量,它始终是相同的消息。 该消息在 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,而不是让事情变得复杂,这不是一个坏习惯,具体取决于你如何使用它。

欢迎评论。

最佳答案

大多数针对 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 数组)而不是文本字符串。总而言之,我想说这绝对不值得——除非您的目标是 IE5

关于javascript - innerHTML 似乎是唯一好的解决方案,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11262956/

相关文章:

javascript - KendoUI TreeView 尝试向 Poco 添加脏属性并获取 Uncaught TypeError : e. slice 不是函数

javascript - 将表单值传递给 react.js 中的 onclick 处理程序

html - GridView 对比HTML 表格 (ASP.net 2.0)

html - 在图像顶部对齐元素

java - dom xml 解析器 java,相同的标签

javascript - 检查某个位置的位是否为1

javascript - 如何在 Opencart 3.0 中按 sku 或按型号将产品添加到购物车

javascript - 切换菜单 - 使菜单在当前页面保持打开状态

css - 无法选择 [类型 :radio] by css

javascript - 与 null-out 相比,delete 对 Object 效率低下,但对 DOM Element 的数据属性有效?