用 Javascript 动态创建选项元素

Question

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

var option = new Option(text, value);

和这个：

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

这些方法中是否存在任何缺点/兼容性问题？此外，还有没有其他动态创建选项的方法，由于某些原因应优先考虑使用？

这些方法是否存在任何缺点/兼容性问题？还有其他的方法可以动态创建选项，是否更适合一些特定情况？

- GOTO 0

Answer 1

据我所知，这两种方法没有区别。使用 Option 构造函数可以方便地设置选项的值和文本，但是您也可以使用 value 和 text 属性来完成相同的操作。

也可以使用 innerHTML 方法，但是 IE8 及更早的版本不支持该方法...

- MaxArt

---

虽然这对代码没有影响，但有一个小区别。使用 var option = new Option(); 将导致 option 成为 Option 对象的实例，且 option instanceof Option 为 true，而使用 var option = document.createElement('option'); 将导致 option 成为字面量而不是 Option 对象的实例，因此 option instanceof Option 为 false；尽管两者都是从相同的 constructor 创建的，且 option.constructor 为 function HTMLOptionElement()。 - Nope

不对，@Nope，你说的不对。document.createElement("option") instanceof Option返回true，与你所说的相反。你会期望这样，因为无论对象是如何创建的，它都是同一种DOM对象的实例。 - Doin

在2013年这种情况并非如此，但现在知道不再是这样了。 - Nope

Answer 2

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

- goe

---

这并不完全准确。在我工作的地方，有一大批为IE6开发的遗留代码，使用了new Option()。也许你的代码中还存在其他问题，导致它无法正常工作。 - Danny C