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!

Prototype innerHTML problem in Internet Explorer

Related posts:

Comments