Element.update（）原型函数在IE中不起作用

Question

我使用的是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()提出了一个jQuery.html()解决方案，但是我的整个文档都是使用prototype.js ，因此我不想将jQuery.html()件事混在一起。

有什么建议么？

Answer 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);

请注意，您可以在options集合中使用add （而不是push ）（它不是数组；某些实现具有push ，但是add更可靠）。