将html解析为jQuery对象的正确方法答案

【问题标题】：The right way parse html to jQuery object将html解析为jQuery对象的正确方法
【发布时间】：2014-10-06 12:50:39
【问题描述】：

我想将一个 html 字符串解析为 jQuery 对象，然后通过 ID 找到一个元素。

我尝试了以下 3 种方法，但只有最后一种有效。我不知道为什么其他的不起作用？

var html = "<html><body><div id='main'></div></body></html>";

// Not work, return 0
console.log($(html).find('#main').length); 
// Not work, return 0
console.log($($.parseHTML(html)).find('#main').length); 
// Works, return 1
console.log($("<html/>").html(html).find('#main').length);

示例如下： http://jsfiddle.net/nbyofkam/2/

【问题讨论】：

$(html) == <div id="main"></div> 这就是为什么你不能使用.find() 来找到它。
您也可以将字符串视为 XML console.log($($.parseXML(html)).find('#main').length)，但最好避免不必要的包装。
我很困惑......在我看来，@YuryTarabanko 在这里给出了正确的答案。有类似的问题，使用 parseXML 代替 pf parseHTML 有帮助。

标签： javascript jquery

【解决方案1】：

我是documented：

在传递复杂的 HTML 时，某些浏览器可能无法生成完全复制所提供的 HTML 源的 DOM。如前所述，jQuery 使用浏览器的 .innerHTML 属性来解析传递的 HTML 并将其插入到当前文档中。在此过程中，某些浏览器会过滤掉某些元素，例如 <html>、<title> 或 <head> 元素.因此，插入的元素可能不能代表传递的原始字符串。

因此，$(html) 减少为 "<div id="main"></div>"。您可以通过记录 $(html)[0].outerHTML 来验证这一点。

所以你不能在不包装的情况下使用find，这就是你要做的。

【讨论】：

作为一种解决方法，有类似findAll 的东西。 github.com/defunkt/jquery-pjax/blob/master/jquery.pjax.js#L620

【解决方案2】：

另一种方法 -

var myTestDiv = document.createElement('div');
var mystr = '<div id="main"></div>';
myTestDiv.innerHTML = mystr;

console.log(myTestDiv.querySelector('div#main'));

【讨论】：