innerHTML replace does not reflect

Question

I have HTML something like this

<div id="foo">
<select>
<option> one </option>
</select>
</div>

when I use

document.getElementById('foo').innerHTML = document.getElementById('foo').innerHTML.replace("<option> one </option>", "<option> two </option>") ;

The innerHTML get replaced but it does not get reflected in the browser.

If I alert innerHTML I can see that it has been changed now but in the browser it still shows old option.

Is there any way to make this change recognized by the browser ?

Thanks in advance.

Answer 1

I guess you are using IE? The problem is that you have to use new Option(...) to populate SELECTs in IE. Like this:

document.getElementsByTagName('select')[0].options[0]=new Option(' two ');

Edit: There is a Microsoft Knowledgebase article about this bug: http://support.microsoft.com/kb/276228