javascript - why innerHTML doesn't reflect changes made in an html form -

this part of html file:

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

now when use following javascript code, gives me exact content of form:

alert(getelementbyid("foo").innerhtml); 

however, after change options withing form, above code still returns previous version of form's content.

for instance, let's i've switch option "1" "2". in case expect above javascript code returns form's content option "2" selected; no matter how change form, return original version of form's content.

content attributes show initial state.

idl attributes (aka properties) show current state.

for example, let's have text input this:

<input value="foo" /> 

it's default text "foo". let's change "bar". then,

• input.getattribute('value') initial value: "foo".
• input.defaultvalue equivalent above: "foo".
• input.value current value: "bar.

var inp = document.queryselector('input');  (inp.oninput = function() {    document.getelementbyid('attr').textcontent = inp.getattribute('value');    document.getelementbyid('defval').textcontent = inp.defaultvalue;    document.getelementbyid('val').textcontent = inp.value;  })();

<input value="foo" />  <p>attribute: <span id="attr"></span></p>  <p>default value: <span id="defval"></span></p>  <p>value: <span id="val"></span></p>

in case happens similar. innerhtml shows html markup, includes content attributes (which reflect initial state) not idl attributes (current state).

if want current state, read idl attributes instead of using innerhtml.