为什么当我使用 JQuery 的 $.parseHTML 时，我错过了 HTML 块的外部 div？

Question

当我用$.parseHTML()解析一个html字符串时，最外层的div消失了。

给定 html 字符串：

var myCode = '<div class="outer">' +
    '    <div class="inner">' +
    '        <div>' +
    '            <p>Hello!</p>' +
    '        </div>' +
    '        <div>' +
    '            <p>Hello!!' +
    '            </p>' +
    '        </div>' +
    '    </div>' +
    '</div>';

当我调用解析这个html时，最外层的div（class="outer"）不存在。

var $myHtmlObject = $($.parseHTML(myCode)) 
console.log($myHtmlObject.html()) // no "outer" div present. 

我做了一个jsfiddle来显示行为

在

解析之前，我可以将所有内容包装在另一个div中，从而轻松解决此问题，但这似乎是对本应起作用的黑客攻击。

Answer 1

因为 .html（） 给出了调用它的元素集的第一个元素的内部 html。您在这里寻找的是outerHTML

console.log($myHtmlObject[0].outerHTML)
console.log($myHtmlObject.prop('outerHTML'))

在这种情况下也不需要使用 parseHTML（）

var log = (function() {
  var $log = $('#log');
  return function(msg) {
    $('<p/>', {
      text: msg
    }).appendTo($log)
  }
})();
var myCode = '<div class="outer">' +
  '    <div class="inner">' +
  '        <div>' +
  '            <p>Hello!</p>' +
  '        </div>' +
  '        <div>' +
  '            <p>Hello!!' +
  '            </p>' +
  '        </div>' +
  '    </div>' +
  '</div>';
var $html = $(myCode);
log('html: ' + $html.html())
log('outer-html: ' + $html.prop('outerHTML'))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="log"></div>