Missing VALUE attribute in textfield Options

[Christian J]

CODE

<script type="text/javascript">
var input=document.createElement('input');
document.body.insertBefore(input, document.body.firstChild);
input.type='text';
input.id='field';

input.value='foo'; // doesn't work
//input.setAttribute('value','foo'); // does work

alert(document.getElementById('field').value); // returns "foo"
alert(document.getElementById('field').getAttribute('value')); // returns null
document.body.innerHTML+=document.getElementById('field').value; // returns "foo", but form field becomes empty
</script>

When I create a textfield like above it seems to matter if I set the value with

CODE

input.value='foo';

or

CODE

input.setAttribute('value','foo');

With the former, the value appears in the browser window, but when I look at the JS-rendered source the TYPE attribute is missing:

CODE

<INPUT type="text" id="field">

and when I run the last line of the script, the textfield is suddenly emptied in the browser window.

This happens in all my browsers, but only with textfields (not the other INPUT types "button", "hidden", "radio", "checkbox or "submit"). Could it be that

CODE

input.value='foo';

sets a property, as opposed to setting an attribute with setAttribute? That might explain why getAttribute returns null in the former case. But then why does the property value "foo" appear in the textfield, why does this only affect textfields, and why does the innerHTML line make the "value" disappear from the textfield?