Comments on: Bug Day: Internet Explorer 7 SELECT element innerHTML bug

By: Andrew Eastgate

Andrew Eastgate — Tue, 18 Nov 2008 15:31:28 +0000

Site ate my HTML But it’s meant to be like this (using square brackets instead of arrow brackets):

if (document.getElementById(”sectionSelector”).outerHTML) {
document.getElementById(”sectionSelector”).outerHTML = “[select id=’sectionSelector’]” + ajax.responseText + “[/select]”;
} else {
document.getElementById(”sectionSelector”).innerHTML = ajax.responseText;
}

By: Andrew Eastgate

Andrew Eastgate — Tue, 18 Nov 2008 15:28:00 +0000

I was having the same issue with the in IE, my code is like this:

if (document.getElementById(”sectionSelector”).outerHTML) {
document.getElementById(”sectionSelector”).outerHTML = “” + ajax.responseText + “”;
} else {
document.getElementById(”sectionSelector”).innerHTML = ajax.responseText;
}

Basically rewrite the whole tag and the options (ajax.responseText in my script) if outerHTML is recognised by the browser, otherwise use the innerHTML method. Tested it and works for me in IE6, IE7, FF2, FF3, and Windows Safari.

By: Tim

Tim — Thu, 13 Nov 2008 00:02:09 +0000

IE has bigger problems with innerHTML than just the select element. Setting innerHTML with certain markup [valid] throws an unknown error.
http://web.2point1.com/2008/11/12/ie-innerhtml-bug/

By: WeBlog - блог про веб-программирование » Blog Archive » баг в IE с innerHTML в select

Fri, 10 Oct 2008 11:22:18 +0000

[…] http://alexle.net/archives/150 […]

By: Max

Max — Mon, 28 Jul 2008 21:19:25 +0000

You will find solutions to all your IE bugs here:

http://webbugtrack.blogspot.com/search/label/innerHTML

the Select element is only one of the elements in IE that doesn’t work properly with the DOM methods.

By: abigdog

abigdog — Thu, 24 Jul 2008 08:10:46 +0000

Olivier Voutat, your method is the way I am adding options to my select. I used cloneNode(true) to clone an entire row of a table, appended it to the tbody. the table row has a select in it … when i used this method of adding options on the select in the dynamically added table row, it failes in * IE7 * (length goes to zero) .. but it does work on selects elsewhere, which happen to be non-dynamic selects in the page HTML. whether this is specific to selects created through this “cloneNode” process in a table, or all dynamically created selects, i don’t know.

By: abigdog

abigdog — Thu, 24 Jul 2008 07:59:59 +0000

Today in IE7 I am trying to create a select dynamically and then insert an optoin based on user input. I am using the same code for dynamically created selects and selects in the original page HTML. Well, with selects that were not dynamically created it works fine, even in IE. But for the dynamically created select, which has a few options put in it when its created, what happens is that when another option added, using “insertBefore” method, on IE the select “length” property then changes to zero! When I changed selectedIndex, that single option will show in the combo, but it won’t drop-down (length 0). I haven’t solved it yet, i guess I will put the select into a div, and when I add another option, I’ll just recreate the entire select…. Of course, this is working fine already in all other browsers I’ve tested. Bizarre, this appears to be an IE bug specific to seletcts that were creatd using DOM methods.

By: Rauli

Rauli — Thu, 24 Jul 2008 07:01:13 +0000

It seems (IE7) also that some table elements are not changed by innerHTML, at least tr seems not work. Only safe elements seem to be such as div and span…??

By: Olivier

Olivier — Fri, 20 Jun 2008 20:34:16 +0000

Just checked a couple days ago that this bug is still present in IE8 bêta…

By: Amnamak

Amnamak — Mon, 28 Apr 2008 17:22:37 +0000

I am using selectBoxOject.options[selectBoxOject.options.length] = new Option(i); . Very simple. See: http://www.devguru.com/Technologies/ecmaScript/quickref/option.html