为什么JavaScript不适用于Firefox/Chrome，而是适用于IE？

Question

我写了一个简单的JavaScript来选择添加到一个HTML Select元素，代码如下所示：

function addOption() { 
    var newOption = document.createElement('<option value="TOYOTA">'); 


    var elSel = document.getElementById('mySelect'); 
    try{ 
    elSel.add(newOption,null); 
    } //Standard 
    catch(ex) 
    {elSel.add(newOption); 
    } //IE Only 
    newOption.innerText = "Toyota"; 
} 

我在网上找到的教程，展示我们需要做这样的事情让这两个火狐/ Chrome浏览器和IE工作。但是，目前只有IE浏览器才能运行，对于FF/Chrome，当我点击“添加”按钮时，没有任何内容被添加到下拉列表中，任何人都可以帮忙吗？提前致谢。

Answer 1

使用这个代替：

var mySelect = document.getElementById("mySelect"); 
mySelect.add(new Option("Toyota", "TOYOTA")); 

Answer 2

您应该指定节点名称，而不是HTML字符串ala jQuery样式到createElement afaik。

var el = document.createElement('option') 
    , fc = document.createTextNode('blah') 
    , s = document.getElementById('foo'); 

el.value = 'blah'; 
el.appendChild(fc); 
s.appendChild(el) 

Answer 3

如果你打算做了很多UI操作的，我建议使用第三方库像jQuery使这更容易，更跨浏览器兼容。

$('#mySelect'). 
     append($("<option value='TOYOTA'>TOYOTA</option>"). 
     attr("value",'TOYOTA'). 
     text('TOYOTA')); 

Answer 4

我很惊讶，即使在IE中工作。

尝试用这种替代函数内的一切：

var newOption = document.createElement("option"); 
newOption.setAttribute("value", "TOYOTA"); 
newOption.appendChild(document.createTextNode("My toyota")); 
var elSel = document.getElementById('mySelect'); 
elSel.appendChild(newOption)