why innerHTML doesn’t reflect changes made in an html form

this is a part of my html file:

<form id="foo">
   <select>
      <option value="1" selected>1</option>
      <option value="2">2</option>
   </select>
</form>

Now when I use the following javascript code, it gives me the exact content of the form:

alert(getElementById("foo").innerHTML);

However, after I change my options withing the form, the above code still returns the previous version of the form’s content.

For instance, let’s say I’ve switch my option from “1” to “2”. In this case I expect the above javascript code returns the form’s content with option “2” selected; but no matter how I change the form, it always return the original version of the form’s content.


Source: cross-browser

Leave a Reply