爲什麼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)