JQuery“外部 HTML”未在 IE9 标准视图中显示更改的值答案

【问题标题】：JQuery "outer HTML" not showing changed values in IE9 standards viewJQuery“外部 HTML”未在 IE9 标准视图中显示更改的值
【发布时间】：2011-10-20 15:11:05
【问题描述】：

在我们的应用程序中，我们使用 $('div').append(obj.clone()).html() 方法获取对象的外部 html。我们基本上是在克隆对象，获取对象的 html，然后对 html 进行一些正则表达式替换（主要是替换 ID 和其他一些属性）。这些对象是 INPUT 类型的，它们的值可能已被用户更改。在我们在 IE9 标准模式下尝试之前，一切都很好。无论出于何种原因，在此模式下抓取对象的外部 HTML 似乎都没有在 HTML 中获得更新的值。为了演示这一点，这里有一个小程序 - 首先尝试在 IE8 标准中运行它，您会看到它更新了值，然后下一次调用 print html 将显示更新的值。但是...如果您切换到 IE9 模式（标准），那么它会在打印出 HTML 时显示原始值，即使在值已更改之后也是如此。有两个函数 - doStuff 和 doStuff2 - 它们都有相同的结果。我只是做了两个，看看是否可能是 clone() 的问题，但似乎不是。这是 POC 代码：



    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt
      <script src="jquery-1.6.4.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <script type="text/javascript">

    $(document).ready(doStuff2 );

    function doStuff()
    {
     alert($('#testinput').val());
     alert( ($('').append($('#testinput').clone())).html());

     $('#testinput').val('newValue');

     alert($('#testinput').val());
     alert( ($('').append($('#testinput').clone())).html());
    }
    function doStuff2()
    {
     alert($('#testinput').val());
     alert( ($('#one').append($('#testinput'))).html());

     $('#testinput').val('newValue');

     alert($('#testinput').val());
     alert( ($('#two').append($('#testinput'))).html());
    }
    </script>
    </head>
    <body>
       <input type="text" id='testinput' value="test">
       <div id='one'/>
       <div id='two'/>
    </body>
    </html>

谢谢

【问题讨论】：

IE9 strict 在表单元素方面存在问题。看到这个：stackoverflow.com/questions/3097219

标签： jquery input outerhtml

【解决方案1】：

.html 方法影响innerHTML，而不是outerHTML。 jQuery 的replaceWith 旨在正确处理outerHTML。

ASP.NET 人要小心：它会从你的 DOM 中删除元素，所以 ViewState 会中断。一种解决方法是采取$(fooElement).hide().after(##new HTML here##)。

【讨论】：