为什么在我使用JQuery的$ .parseHTML时缺少HTML块的外部div？

Question

When I parse an html string with $.parseHTML() , the outer most div disappears.

Given the html string:

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

When I call parse this html, the outer most div ( class="outer" ) isn't present.

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

I made a jsfiddle to show the behavior

I can easily get around this by wrapping everything in another div before I parse it, but that seems like a hack for something that should otherwise work.

Answer 1

Because .html() gives the inner html of the first element of the set of element on which it was called. What you are looking for here is the outerHTML

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

Also there is no need to use parseHTML() in this case

 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>