Почему 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";
}

Я нашел онлайн-учебник, который показывает, что нам нужно сделать что-то подобное, чтобы получить обаFirefox / Chrome и IE работают.Однако в настоящее время работает только IE, для FF / Chrome, когда я нажимаю кнопку «Добавить», в выпадающий список ничего не добавляется, кто-нибудь может помочь?Заранее спасибо.

Answer 1

Вы должны указать имя узла, а не строку HTML в стиле 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 2

Я удивлен, что даже работает в IE.

Попробуйте заменить все внутри функции на это:

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

Answer 3

Если вы собираетесь много манипулировать пользовательским интерфейсом, я предлагаю использовать стороннюю библиотеку, такую ​​как jQuery , чтобы сделать ее более простой и более кросс-браузерной.

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

Answer 4

Используйте это вместо:

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