jQuery - why attr() does not consistently update displayed value on screen

Question

here's two lines of jQuery

$("input[name=displayPrice1]").attr("value", vPrice);
$("input[name=displayPrice1]").val(vPrice);

both lines update the value of an input of type text.

here is a fiddle http://jsfiddle.net/fZm7w/

follow these steps:
1. after page load: click set attr() - the empty input will take the value of 150
2. click on append row and click again on set attr() - both input will get at 150
3. change manually the values in both inputs - say with 500 and 100
4. click set attr() - none of the values displayed will change , but the value attribute will change
5. click on set val() - both displayed values will be updated but not the attr value, as expected

Why does set attr() sets the value on screen when the input is empty but not when it has been filled with content by the user?

Answer 1

.val() gives the actual value that is in input field

.attr() is only getting attribute value in source of input field