When HTML objects are created on the fly, the html() function does not work properly for values which are set by the val() function.

The following code demonstrates this problem.

var result = $('<div><input type="hidden" /></div>');
$(result).find('input').val('test');
console.log($(result).html());
// Expected output: <input value="test" type="hidden">
// Output: <input value="test" type="hidden">
// THIS ONE IS CORRECT


var output = $('<div><textarea>Error</textarea></div>');
$(output).find('textarea').val('test');
console.log($(output).html());
// Expected output: <textarea>test</textarea>
// Output: <textarea>Error</textarea>

var result = $('<div><textarea></textarea></div>');
$(result).find('textarea').attr('value', 'test');
console.log($(result).html());
// Expected output: <textarea>test</textarea>
// Output: <textarea value="test"></textarea>

var result = $('<div><input type="text" /></div>');
$(result).find('input').val('test');
console.log($(result).html());
// Expected output: <input value="test" type="text">
// Output: <input type="text">

As you see, setting the value only works properly for hidden input fields. Whe you log the jQuery object itself, the correct value is set. It just does not show in the html() function.

http://jsfiddle.net/fDLsc/