Prototype innerHTML problem in Internet Explorer

September 22, 2010 Javascript Troubleshooting
This is another case of how browsers react different. Adding options to a select box would work in Firefox when using the following code:
<select id="ourSelectBox"></select>

<script type="text/javascript">

$("ourSelectBox").innerHTML = "<option value='1'>test</option>";
alert($("ourSelectBox").innerHTML);

</script>

But in Internet Explorer the alert will display something like "test</OPTION>" and your DOM would be completely messed up.

The solution is to use the update-function instead:
<select id="ourSelectBox"></select>

<script type="text/javascript">

$("ourSelectBox").update("<option value='1'>test</option>");
alert($("ourSelectBox").innerHTML);

</script>

Now it should work in Internet Explorer as well!

Related posts: