Bug when creating select options using innerHTML in IE

Recently I was creating some code that dynamically changes the options in a select element. In the first draft I decided to us innerHTML for speed. Using innerHTML for this is very straight forward. You build your string of options and dump them into the select.

Unfortunately the draw back to doing this with innerHTML that there is a bug in IE where the first option element gets truncated rendering the select blank.

There's more on this problem and some potential workarounds involving outerHTML and DOM methods here at support.microsoft.com.

Personally I would recommend using the DOM methods to do this sort of thing rather than resorting to an outerHTML kludge. As you would be producing the options based on a loop the code can be quite concise. See my next post JSON Selects for more on how to use the DOM methods to do this.