IE: How to properly destroy your ‘select’ elements with innerHTML!

I know that some people, myself included, say that you’re not supposed to use innerHTML.
And yet for expediency’s sake, I find myself using innerHTML.

Problem

I’ve got an AJAX request to a JSP page which in turn performs an XSL transform on an XML file and returns a bunch of HTML <option> elements that JavaScript inserts into an existing <select> element using innerHTML.

Firefox does it fine, as you’d expect, but IE wasn’t playing nice. The resultant markup was broken, with a missing first opening <option> tag, and some random empty <option> element on the end.

In short, nothing showed up.

Solution

So I turned to google and found: BUG: Internet Explorer Fails to Set the innerHTML Property of the Select Object.

Thanks Microsoft, you just make it so easy. Not even.

I think the best solution here is to do it properly, and change my JSP to return a JSON object or something, and use createElement instead. I know innerHTML is faster, but it’s kinda not proper.