prototype.js innerHTML 不适用于 IE答案

【问题标题】：prototype.js innerHTML does not work with IEprototype.js innerHTML 不适用于 IE
【发布时间】：2014-04-05 20:27:54
【问题描述】：

显然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，但我的脚本中有许多其他地方我将更大的 HTML 块分配给div 元素，通过.innerHTML 和所有工作。除了上面声明的下拉表单分配。

【问题讨论】：

我将开始......你的选择器缺少#
你确定你使用的是 jQuery 吗？那些 sn-ps 看起来像 prototype.js 给我打电话。
@Douglas - 你是对的。因为一些其他的东西我弄错了。无论如何-是的，我在这里使用prototype.js。
这会很方便知道...下次明确您正在使用哪个库

标签： javascript internet-explorer prototypejs

【解决方案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> 标记。

【讨论】：

OP 使用的是 Prototype，为什么要展示 jQuery 解决方案？
因为他最初询问时只添加了javascript标签

【解决方案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 从来没有优雅地处理过 select 元素的修改，这可以追溯到我第一次尝试做这种事情时的 IE 5。

【讨论】：