Firefox中的jQuery html（）使用.innerHTML忽略DOM更改
我真的很惊讶我没有遇到过这个问题，但似乎调用一个元素的jQueries .html（）函数忽略DOM中的变化，即它返回原始源中的HTML。 IE不这样做。 jQueries .html（）只是在内部使用innerHTML属性。
这是否意味着发生？ 我在Firefox 3.5.2上。 我在下面有一个例子，不pipe你怎么改变文本框的值，“容器”元素的innerHTML都只返回HTML标记中定义的值。 该示例不使用jQuery只是为了使其更简单（使用jQuery的结果是相同的）。
有没有人有一个工作，我可以得到一个容器的HTML在其当前的状态，即包括任何脚本更改的DOM？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <script type="text/javascript"> <!-- function BodyLoad(){ document.getElementById("textbox").value = "initial UPDATE"; DisplayTextBoxValue(); } function DisplayTextBoxValue(){ alert(document.getElementById("container").innerHTML); return false; } //--> </script> </head> <body onload="BodyLoad();"> <div id="container"> <input type="text" id="textbox" value="initial" /> </div> <input type="button" id="button" value="Test me" onclick="return DisplayTextBoxValue();" /> </body> </html> Firefox不会根据用户input更新DOM对象的value 属性 ，只是它的value 属性 – 相当快速的解决方法存在。
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; }
使.formhtml()自动执行此操作的jQuery插件：
(function($) { var oldHTML = $.fn.html; $.fn.formhtml = function() { if (arguments.length) return oldHTML.apply(this,arguments); $("input,button", this).each(function() { this.setAttribute('value',this.value); }); $("textarea", this).each(function() { // updated - thanks Raja & Dr. Fred! $(this).text(this.value); }); $("input:radio,input: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);
这是Firefox中已知的“问题”。 innerHTML的规范并不完全清楚，所以不同的浏览器厂商以不同的方式实现它。
关于这个话题的讨论可以在这里find：
http://forums.mozillazine.org/viewtopic.php?t=317838#1744233
感谢您的formhtml插件。 为了使用它与textarea ，我不得不更新它：
$("textarea", this).each(function() { $(this).text($(this).val()); });
我知道你的问题涉及到innerHTML ，但如果它只是你需要的container内的textbox的值，那么
$('#textbox').val()
会给出正确的（更新的）文本框的值。
另一种DOM方法是在特定元素上设置defaultValue – 从投票答案中借用相同的代码。
function DisplayTextBoxValue(){ var element = document.getElementById('textbox'); element.defaultValue = element.value; alert(document.getElementById("container").innerHTML); return false; }
这应该打印更新的innerHTML。
jQuery的解决scheme更好，因为它附加到所有的input元素，而不是一个特定的元素。 这也可以使用“DOM only”来完成，包括迭代DOM来检测所有input元素，并在所有input元素上添加onChange方法调用。 如果你不知道在页面上的字段。
这个更新函数只适用于没有手动更改的input字段。 添加了指示的行来更新可见的input文本：
// set text input value from the associated sel dropdown and reset dropdown function set_input_value(eid, sel) { var el = document.getElementById(eid); el.setAttribute("value", sel.options[sel.selectedIndex].text); // added this line to solve the issue: el.value = el.getAttribute('value'); sel.selectedIndex=0; }
