Element.update() prototype function not working in IE

Question

I was using Element.innerHTML but IE (8,9,10) doesn't like it, so I switched to Element.insert(), but IE doesn't like it either. Then decided to try with Element.update() - nope again!

Searched around and found out that .update() is actually the working replacement of .innerHTML for IE... Tried with passing a variable or even a direct string as parameter to the function - "nuh uh" says IE.

script

var dropdownHTML = '<option>Some text</option>';
$('size_list').update('<form ><select id="dropdown_options"></select></form>');
for (var element in jsonResponse){
  dropdownHTML += '<option>'+ someString + '</option>';
  ...
}
$('dropdown_options').update(dropdownHTML);

source

<div id="size_list" style="float:right;">
</div>

Needless to say, it all works in FF and Chrome. I made a working solution with jQuery.html() but my whole document is built up with prototype.js and I would not like to mix the 2 things.

Any suggestions?

Answer 1

Probably the simplest answer here is to use the Option constructor rather than setting the HTML of the select element.

var form = document.createElement('form');
var select = document.createElement('select');
select.id = "dropdown_options";
select.options.add(new Option("Some text"));
for (/*...whatever your loop is...*/) {
    select.options.add(new Option("text of the option", "optional value of the option"));
}
form.appendChild(select);
$("size_list").appendChild(form);

Note that you use add (rather than push) with the options collection (it's not an array; some implementations have push, but add is more reliable).