jQuery .val() does not work on html chunk?

Question

I cant figure out, why this code does not work as expected:

var $obj = jQuery('<div>xx<input type="text" value="" />xx</div>');
$obj.find('input').val('testing');
console.log($obj.html());

The resulting output is without any change - i.e. no change in value. But append() and other functions works fine. What could be wrong?

Answer 1

value is an atrribute of the input dialog.

Doing .val(...) changes the value property and not the value in the DOM.

See here for the differences between properties and attributes.

---

If you wanted to see a physical change in the value attribute you could do something like this:

var $obj = jQuery('<div>xx<input type="text" value="" />xx</div>');
$obj.find('input').attr('value','testing');
console.log($obj.html());

Demo: http://jsfiddle.net/maniator/YsZLt/