JQuery html() call doesn't return value after forcing attr update

Maybe I'm not understanding something basic here, but the html() call doesn't return an element with all attributes filled in, even after an explicit call to set the attribute.

For example, I have a text box:

<input type="text" id="foo" value="" />

When the user fills in a value in this box, a function is called (onBlur of input text box).

$('#foo').blur(function(event) { updateFoo(this); });

In that function the following code exists:

function updateFoo(input) {
  // force DOM update??
  $('#'+input.id).attr('value', input.value);

  // successfully displays value user entered
  alert($('#'+input.id).attr('value')); 

  // displays input element, with value not filled in,
  // like: 'input type="text" id="foo" value="" />'
  alert($('#'+input.id).parent().html()); 

  ...
}

Shouldn't the html() call return the element with the value attribute set?

I'm using Firefox 3.6.13 on Max OSX.

I saw this forum post: http://forums.a开发者_运维百科sp.net/t/1578929.aspx which I based some of my assumptions off of...

Thanks, Galen

After researching some more, I ran across this post:

jQuery html() in Firefox (uses .innerHTML) ignores DOM changes

which pretty much sums up the problem I'm having. Basically it's a firefox implementation issue...

Instead of:

$('#'+input.id).attr('value', input.value);

I'm now using:

input.setAttribute('value', input.value); // force DOM update

which solved the problem.

I think this is a side effect of the fact that value has a very specialized use. I imagine that the value is stored in some local property instead of in the DOM itself.

If you change the attr to something else, like newattr, it works fine:

http://jsfiddle.net/m9vWT/

Of course, that doesn't help with the value attribute...