将HTML解析为jQuery对象的正确方法

Question

将HTML解析为jQuery对象的正确方法

11

我想将一个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/

- andyf

1

$(html) == <div id="main"></div>，这就是为什么你不能使用.find()来查找它。 - Anton

1

你也可以将字符串视为XML console.log($($.parseXML(html)).find('#main').length)，但最好避免不必要的包装。 - Yury Tarabanko

1

我感到困惑...在我看来，@YuryTarabanko在这里给出了正确的答案。我遇到了类似的问题，使用parseXML而不是parseHTML有所帮助。 - Zane

2个回答

8

另一种实现方式 -

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

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

- Stacie

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Denys Séguret · Accepted Answer

这里有一份文档：

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

结果， $(html) 被减少为 "<div id="main"></div>"。您可以通过记录 $(html)[0].outerHTML 来验证它。

因此，您不能直接使用 find，而需要先进行包装，这就是您所做的。