如何正確獲取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();