在 Javascript 中动态创建选项元素答案

【问题标题】：Dynamically create option elements in Javascript在 Javascript 中动态创建选项元素
【发布时间】：2013-04-15 04:42:04
【问题描述】：

在 Javascript 中动态创建 DOM 选项元素的首选方式是什么？我发现了在实际代码中使用的 Option 构造函数和 createElement 变体，如下所示：

var option = new Option(text, value);

还有这个：

var option = document.createElement('option');
option.text = text;
option.value = value;

这些方法是否存在任何缺点/兼容性问题？另外，由于某些原因，是否有任何其他方法可以动态创建选项而不是上述方法？

【问题讨论】：

【解决方案1】：

例如，我注意到在 IE9 下使用 new Option() 不能很好地工作，而在 IE10 和 IE11 中它可以工作。我最近回到了原始代码并恢复了有人使用 document.createElement('option') 所做的更改以使 IE9 正常工作。

【讨论】：

【解决方案2】：

据我所知，这两种方法没有区别。使用Option 构造函数可以方便地设置选项的值和文本，但您可以使用value 和text 属性来做同样的事情。

本来可以采用innerHTML 的方式，但 IE8 和更早版本在这方面失败了...

【讨论】：

虽然不会对代码产生影响，但还是有细微的差别。使用var option = new Option(); 将导致option 是Option 对象的一个实例，而option instanceof Option 是true，而使用var option = document.createElement('option'); 将导致option 是一个文字而不是@987654332 的实例@Object，因此option instanceof Option 是false；虽然两者都是从相同的constructor 创建的，但option.constructor 将是function HTMLOptionElement()。
不，@Nope，事实并非如此。 document.createElement("option") instanceof Option 返回真，与你所说的相反。您会期望这一点，因为无论对象如何创建，它都是同一种 DOM 对象的实例。
@Doin 在 2013 年情况并非如此，但很高兴知道它不再如此。