在 IE 中使用 .innerHTML 添加选项元素

Posted 2023-05-07

【中文标题】在 IE 中使用 .innerHTML 添加选项元素

【英文标题】：Adding option elements using .innerHTML in IE

【发布时间】：2012-01-23 08:44:25

【问题描述】：

我有一个 txt 变量，其中包含我需要为下拉列表设置的 html 字符串。该代码在除 IE 之外的所有其他浏览器中都可以正常工作。基本代码如下所示。

带有更多代码的while循环

document.getElementById('theSelector').innerHTML = txt;

'theSelector' 是我的表单的选择元素的 ID

所以基本上 IE 会弹出并且不会生成我的列表。如果您想查看源代码和我正在做的一切，我将在下面发布我的网页。如果您想查看该网站应该如何运行，只需在另一个不是 ie 的浏览器中运行它即可。

http://1wux.com/Resume/signUp.html

【问题讨论】：

我认为IE不会让你.innerHTML = '<options/>';。你必须使用 DOM 方法。

如果我没记错的话，这是一个长期存在的 IE 错误。 support.microsoft.com/kb/276228 这个错误报告是在 2003 年提交的。我遇到过一次，最简单的解决方案是使用亚当的答案。

【参考方案1】：

根据您没有生成列表的评论，以及您尝试添加选项的 Jared 评论，请尝试以下操作：

var list = document.getElementById('theSelector');
var newOp = document.createElement("option");
newOp.text = "Txt";
newOp.value = "1";
list.options.add(newOp);

编辑

根据 Jared 的评论，以下可能为您提供一点性能优势：

list.options[list.options.length] = newOp;

【讨论】：

@JaredFarrish - 超越创造那个小提琴 - 对你 +1 - 你离闪亮的徽章只有一个距离:) 哪种方法 - add 而不是 push，通常像数组使用？

不是更好的支持吗？老实说，我通常只做list.options[list.options.length]。习惯的力量，我记得最近听说它被认为更有效。

这是我读到的文章：scottlogic.co.uk/2010/10/javascript-array-performance，虽然显然我上面的方法不是最有效的，array[i] 是。

@JaredFarrish- 这真的很有趣 - 我根据您的评论添加了更新

@JaredFarrish - 我在您撰写上述评论时编写了我的编辑。我们确实组成了一支优秀的团队:)

【参考方案2】：

正如其他人所提到的，这是所有版本的 IE 中的错误。我会使用@AdamRackis 的解决方案，但如果您必须使用字符串构建 HTML，唯一的解决方法似乎是使用 outerHTML 并在字符串中包含您的 <select>。

演示：http://jsfiddle.net/ThinkingStiff/TWYUa/

HTML：

<select id="select"></select>

脚本：

var options = '<select id="select"><option>one</option><option>two</option></select>';
document.getElementById( 'select' ).outerHTML = options;

【讨论】：

谢谢大家！我看看能不能解决。

【参考方案3】：

使用 Jquery

$('#theSelector').html(txt);