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

  DOM:

  

复制代码 代码如下:

  function DisplayTextBoxValue(){

  var element = document.getElementById('textbox');

  // set the attribute on the DOM Element by hand - will update the innerHTML

  element.setAttribute('value', element.value);

  alert(document.getElementById("container").innerHTML);

  return false;

  }

  jQuery plugin that makes .formhtml() automatically do this:

  

复制代码 代码如下:

  (function($) {

  var oldHTML = $.fn.html;

  $.fn.formhtml = function() {

  if (arguments.length) return oldHTML.apply(this,arguments);

  $("input,textarea,button", this).each(function() {

  this.setAttribute('value',this.value);

  });

  $(":radio,:checkbox", this).each(function() {

  // im not really even sure you need to do this for "checked"

  // but what the heck, better safe than sorry

  if (this.checked) this.setAttribute('checked', 'checked');

  else this.removeAttribute('checked');

  });

  $("option", this).each(function() {

  // also not sure, but, better safe...

  if (this.selected) this.setAttribute('selected', 'selected');

  else this.removeAttribute('selected');

  });

  return oldHTML.apply(this);

  };

  //optional to override real .html() if you want

  // $.fn.html = $.fn.formhtml;

  })(jQuery);