Question

我有一些看起来像这样的JavaScript：

var sel = '<option value="{value}" {selected}>{name}</option>';
...
$(index + '_expiry').innerHTML = sel; // $(index + '_expiry) is a select.

这在firefox中运行良好，但在Internet Explorer中却不行 - 甚至不是IE9。

There is already a solution to this problem涉及在DOM中创建新元素而不是更改innerHTML。

通过操纵.innerHTML将新元素插入页面是否错误？我在我的网站上使用innerHTML方法，这很容易。它适用于IE中的简单元素，如.div。

虽然IE通常很烦人，但是较新的版本有一个更严格的javascript解析器可能更正确 - 例如，它不喜欢创建为['a','b','c',]的数组。

那么，使用.innerHTML在DOM中创建新的HTML元素是不好，效率低，不可靠或类似？我应该只用它来插入纯文本吗？或者这只是IE benig顽固的？

Answer 1

所以，不好吗

主观

低效

通常在运行时方面比替代方案更有效。成本来自确保正确构造字符串。

不可靠的

浏览器是一致的（尽管并不总是与其他浏览器一样），因此您可以依赖经过适当测试的代码。

或者这只是IE benig顽固的？

IE不喜欢编辑某些元素的内部（特别是表格和选择元素）。

Answer 2

您正在使用jQuery而不是同时使用。只需使用jQuery：

$(index + '_expiry').html('<option value="{value}" {selected}>{name}</option>');

Answer 3

如果你的代码实际上是正确的，那么

innerHTML就完全没问了。使用DOM操作的关键在于，由于输入错误或因为{name}占位符中的任何内容的值包含HTML语法而无法创建格式错误的HTML。它被认为更好，因为它有助于防止错误 - 当你生成像一个简单标记一样小的HTML块时，这可能是一种冲击。