為什么在我使用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>