two seven

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.

So I was trying to copy all the <option></option> elements from one <select></select> element to another.

I had a drop-down list of countries, and I wanted users to be able to select more than one country, so had a ‘Add another country’ button that created a new drop-down; copying into it the <option></option> elements from the first drop-down. (more…)

So I learned (the hard way) that IE doesn’t like it when you create JS variables with the same name as the id of an element in the code.

Thanks, Stuart.