javascript - 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

works fine for me in Firefox 3.5

Working Demo

EDIT: You must be using IE. You need to create a new option and add it to the element, or amend the text of the existing option

Working Demo - tested and working in FireFox and IE 7.

var foo = document.getElementById('foo');
var select = foo.getElementsByTagName('select');
select[0].options[0].text = ' two ';