Element.update() 原型函数在 IE 中不起作用答案

【问题标题】：Element.update() prototype function not working in IEElement.update() 原型函数在 IE 中不起作用
【发布时间】：2014-04-14 19:22:09
【问题描述】：

我使用的是Element.innerHTML，但 IE (8,9,10) 不喜欢它，所以我切换到 Element.insert()，但 IE 也不喜欢它。然后决定尝试Element.update() - 再不行！

四处搜索，发现.update() 实际上是 IE 的 .innerHTML 的有效替代品...尝试将变量甚至直接字符串作为参数传递给函数 - “nuh uh”说 IE。

脚本

var dropdownHTML = '<option>Some text</option>';
$('size_list').update('<form ><select id="dropdown_options"></select></form>');
for (var element in jsonResponse){
  dropdownHTML += '<option>'+ someString + '</option>';
  ...
}
$('dropdown_options').update(dropdownHTML);

来源

<div id="size_list" style="float:right;">
</div>

不用说，这一切都适用于 FF 和 Chrome。我用jQuery.html() 制定了一个可行的解决方案，但我的整个文档都是用prototype.js 构建的，我不想把这两件事混为一谈。

有什么建议吗？

【问题讨论】：

只是一个 for 循环，在这种情况下并不重要，因为脚本在循环之前的 .update() 处中断。我会用原来的样子更新代码sn-p。
@DhavalMarthak - 我的目标是不使用 jQuery。 :)

标签： javascript internet-explorer prototypejs

【解决方案1】：

这里可能最简单的答案是使用Option 构造函数，而不是设置select 元素的HTML。

var form = document.createElement('form');
var select = document.createElement('select');
select.id = "dropdown_options";
select.options.add(new Option("Some text"));
for (/*...whatever your loop is...*/) {
    select.options.add(new Option("text of the option", "optional value of the option"));
}
form.appendChild(select);
$("size_list").appendChild(form);

请注意，您将add（而不是push）与选项集合一起使用（它不是数组；某些实现有push，但add 更可靠）。

【讨论】：