Question

I just found out that in FF, if you are dynamically creating an OPTION DOM element inside a SELECT element and just set its innerHTML, it sets both the innerHTML i.e. the displayed text as well as the value of the OPTION.

var opt = document.createElement(‘OPTION’);
opt.innerHTML = ‘Opt’;

this set the “value” attribute as well of the element.

Is this correct behavior? I haven’t been able to replicate this for IE.

Answer 1

innerHTML is not well defined here.

https://developer.mozilla.org/En/DOM/Element.innerHTML

As there is no public specification
for this property, implementations
differ widely. For example, when text
is entered into a text input, IE will
change the value attribute of the
input’s innerHTML property but Gecko
browsers do not.

you may use something like the following code for adding option elements to a select element:

var elOptNew = document.createElement('option');
elOptNew.text = 'Insert' + num;
elOptNew.value = 'insert' + num;
var elOptOld = elSel.options[elSel.selectedIndex];  
try {
  elSel.add(elOptNew, elOptOld); // standards compliant; doesn't work in IE
}
catch(ex) {
  elSel.add(elOptNew, elSel.selectedIndex); // IE only
}