Firefox 中的 jQuery html()（使用 .innerHTML）忽略 DOM 更改答案

【问题标题】：jQuery html() in Firefox (uses .innerHTML) ignores DOM changesFirefox 中的 jQuery html()（使用 .innerHTML）忽略 DOM 更改
【发布时间】：2010-11-26 05:02:42
【问题描述】：

我真的很惊讶我以前没有遇到过这个问题，但似乎在元素上调用 jQueries .html() 函数会忽略 DOM 中的更改，即它返回原始源中的 HTML。 IE 不这样做。 jQueries .html() 只是在内部使用 innerHTML 属性。

这是注定要发生的吗？我在 Firefox 3.5.2 上。我在下面有一个示例，无论您将文本框值更改为什么，“容器”元素的 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>

【问题讨论】：

标签： jquery html firefox dom innerhtml

【解决方案1】：

Firefox 不会根据用户输入更新 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);

【讨论】：

您的插件适用于所有控件，但它不适用于 FF 中的 Textarea 单独工作:-(....您是否进行了任何更改以使其工作？已经添加了 1，因为这对我有帮助很多:-)
这很好用，但我需要使用@Dr Fred 在下面的调整。将 textarea 的 innerHTML 设置为它的值会丢失换行符和任何其他额外的空格。
更新了@Dr Fred 的改动，很有意义。

【解决方案2】：

这是 Firefox 中的一个已知“问题”。 innerHTML 的规范并不完全清楚，因此不同的浏览器供应商以不同的方式实现它。

可以在此处找到有关此主题的讨论：

http://forums.mozillazine.org/viewtopic.php?t=317838#1744233

【讨论】：

【解决方案3】：

感谢您的 formhtml 插件。为了与textarea 一起使用，我必须更新它：

$("textarea", this).each(function() { 
  $(this).text($(this).val()); 
});

【讨论】：

我使用@gnarf 的答案进行此调整以保留 textarea 中的所有空白（或足够接近... $this.text(this.value)）
谢谢，希望您能在此处提出编辑建议！我改变了我的答案以纳入这一点。

【解决方案4】：

我知道您的问题与innerHTML 相关，但如果您需要的只是container 中textbox 的值，那么

$('#textbox').val()

将给出正确的（更新的）文本框值。

【讨论】：

【解决方案5】：

另一种 DOM 方法是在特定元素上设置 defaultValue - 从投票答案中借用相同的代码。

function DisplayTextBoxValue(){
  var element = document.getElementById('textbox');
  element.defaultValue = element.value;    
  alert(document.getElementById("container").innerHTML);             
  return false;
}

这应该打印更新的innerHTML。

jQuery 的解决方案更好，因为它附加到所有输入元素而不是特定元素。这也可以使用“仅 DOM”来完成，将涉及迭代 DOM 以检测所有输入元素并在所有输入元素上添加 onChange 方法调用。如果您不知道 hte 页面上的字段。

【讨论】：

【解决方案6】：

此更新功能仅适用于未手动更改的输入字段。添加了指示的行以更新可见的输入文本：

  // 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;
  }

【讨论】：