javascript - 当我使用 JQuery 的 $.parseHTML 时，为什么我会缺少 HTML block 的外部 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. 

I made a jsfiddle to show the behavior

在解析它之前，我可以通过将所有内容包装在 另一个 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>