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中的代码，也是＆＃34; p＆＃34;不见了。任何的想法？感谢。

Answer 1

这与jQuery无关，它不是一个错误，p元素不能有ol或ul个孩子。 p元素只能有phrasing content。当涉及p元素时，浏览器本身会关闭ol元素。

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

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

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

另一个 hackish 方法使用带有未知 script属性的type标记或隐藏的input。通过使用浏览器未知的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();

如何正确获取div的内容？

1 个答案: