Question

take a look at the JsFiddle here:

http://jsfiddle.net/ru2Fg/2/

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's val() method change doesn't seem to change the 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 1

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 false.

The same applies to checkboxes and the checked attribute. The same also applies for the disabled attribute, and several other things too.