Question by Li Haoyi
take a look at the JsFiddle here:
Essentially, it starts with two
textareas: one empty, one with stuff inside, and an
input type=text. I was under the impression that to put stuff in an
input you change it’s
value, and to put stuff in a
textarea you add the text as a child to the node.
I perform a
$(...).val(...) to change their contents. And their contents do change.
However, the DOM looks exactly the same! I’m printing out the 3 elements with
console.log(); they seem unchanged. I look at them with chrome’s inspect element: they seem unchanged.
I’ve looked at jQuery val() change DOM, but that question concludes it’s something funny with firebug not refreshing the HTML it displays. In this case, i’m quite sure inspect element displays the current html that exists on the page: i’ve seen the
left attribute changing furiously when things are scrolling, for example. I’m also checking it using the console, which tells me the same thing: nothing changed.
My eyes, though, tell me something has changed, as I’m seeing “10, omg, moo” instead of “blank, hello world, 2000”. What’s going on?
EDIT: I posted the wrong jsFiddle. This should be the correct one now
Answer by Kolink
There is a difference between the
value attribute and the
value property. When you type in the input box, you are changing the property, not the attribute. The attribute stays the same as when the document was loaded. Among other things, this means you can reset an input box to its default value with
elem.value = elem.getAttribute('value');.
Similarly, if you have a drop-down
<select> with one of the options having the
selected attribute set, even if you choose a different option that attribute will still be there even though the
selected property is now
The same applies to checkboxes and the
checked attribute. The same also applies for the
disabled attribute, and several other things too.
Answer by Starx
It is in-fact changing the DOM, other ways the 10 woulnd’t have showed up in the text area anyway. The problem is in the firebug itself(at list the old one), I am not sure if it is still available in the new ones.
To verify, you can use the web console of firefox or console of chrome.