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.

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

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

  1. Maximus says:

    I would like to see a continuation of the topic

  2. Ima says:

    I see a lot of interesting posts on your blog.
    You have to spend a lot of time writing, i know how to save you a lot of work, there is a tool
    that creates unique, google friendly articles in couple of seconds, just
    type in google – k2 unlimited content

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>