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.


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.


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.

This entry was posted in Coding, JavaScript. Bookmark the permalink.

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

  1. Maximus says:

    I would like to see a continuation of the topic

Leave a Reply

Your email address will not be published. Required fields are marked *