原型.js innerHTML不适用于IE

Question

显然IE（10）不喜欢这段代码：

$('size_list').innerHTML = '<form id="dropdown_menu"><select id="dropdown_options"></select></form>';

未生成下拉菜单。我收到一个Unknown Run Time错误，这真的很"有帮助"。下一行代码是：

$('dropdown_options').innerHTML = '<option>Choose size</option>';

但是当我调试时 - 我什至没有到这里。

'size_list'元素只是一个简单的空div：

<div id="size_list" style="float:right; margin-top: -22px;"></div>

我发现了一些信息，指出.innerHTML并不真正适用于IE，但是我的脚本中还有许多其他地方，我通过.innerHTML和所有工作将更大的HTML块分配给div元素。除了上部声明的下拉表单分配。

Answer 1

试试这个：

$('#size_list').html('<form id="dropdown_menu"><select id="dropdown_options"></select></form>');
$('#dropdown_options').html('<option>Choose size</option>');

你不能用锤子作为扳手...

或使用document.getElementById('size_list').innerHTML或使用$('#size_list').html()

不要忘记在jQuery中的id选择器之前放置一个

#，在类选择器之前放置一个.，否则jQuery会尝试查找DOM树中不存在的<size_list>标记。

Answer 2

首先，虽然使用直接插入 html 方法添加选择选项可能很方便，但它很少普遍有效。向选择中添加选项的无懈可击的方法是在循环中一次构建一个选项，分配它们的值并以老式的方式标记它们。

var form = new Element('form', {id: 'dropdown_menu' });
var picker = new Element('select', {id: 'dropdown_options', size: 1 });
$('size_list').insert(form);
form.insert(picker);
picker.options[picker.options.length] = new Option('Choose size', '');
// want to add a list of elements in a loop?
$w('Foo Bar Baz').each(function(val){
  picker.options[picker.options.length] = new Option(val, val);
});

IE从来没有优雅地处理过选择元素的修改，这可以追溯到IE 5，当我第一次开始尝试做这种事情时。