如何正确获取div的内容？

Question

以下是带有一些HTML代码的div：

<div id="MyDiv" contentEditable="true">
<p>This is the first P</p>
    <p id="MyPId">
        <ol>
            <li>Text 1</li>
            <li>Text 2</li>
        </ol>
   </p>
</div>

在运行时，我需要HTML代码。 但是就像在DIV中一样，正确！ 下面的东西给我一个错误的结果DEMO ：

var MyHTML = $('#MyDiv').html();
alert( MyHTML );

结果如下：

<p>This is the first P</p>
    <p id="MyPId">
        </p><ol>
            <li>Text 1</li>
            <li>Text 2</li>
        </ol>
   <p></p>

仔细观察，这不是我以前在DIV中的代码，而且也缺少“ p”。 任何想法？ 谢谢。

Answer 1

这与jQuery无关，不是bug， p元素不能包含ol或ul子元素。 p元素只能具有短语内容 。 当涉及到ol元素时，浏览器本身会关闭p元素。

innerHTML是元素的已解析 HTML内容的字符串表示形式。 表单元素具有defaultValue （ textarea ， input[type=text] ，...）， defaultChecked （ input[type=checkbox] ）和其他类似的属性，用于存储一些与表单相关的值，但其他元素则不是这种情况，即没有defaultInnerHTML或类似属性。

一种可能的解决方案是通过AJAX获取元素的内容，因此您将拥有原始的html而不是经过解析的html。 请注意，在解析后（通过设置innerHTML ），您将获得相同的结果。

$.ajax({
    url: '/path/to/a/resource',
}).done(function(originalHTMLReturnedByTheRequest) {
     // 
});

另一种骇人听闻的方法是使用具有未知 type属性或隐藏input的script标签。 通过使用浏览器未知的type属性，可以防止对script标签的解释：

<script id="originalHTML" type='whatever'>
   <p>This is the first P</p>
   <p id="MyPId">
      <ol>
          <li>Text 1</li>
          <li>Text 2</li>
      </ol>
   </p>
</script>

JavaScript：

var defaultContent = $('#originalHTML').html();