将html解析为jQuery对象的正确方法
Posted
技术标签:
【中文标题】将html解析为jQuery对象的正确方法【英文标题】：The right way parse html to jQuery object 【发布时间】：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 有帮助。
【参考方案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'));
【讨论】：
以上是关于将html解析为jQuery对象的正确方法的主要内容，如果未能解决你的问题，请参考以下文章