正确的方式解析html为jQuery对象

The right way parse html to jQuery object

本文关键字：jQuery 对象 html 方式解      更新时间：2023-09-26

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

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

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

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

所以你不能使用没有包装的find，这就是你所做的。

另一种方法- 

var myTestDiv = document.createElement('div');
var mystr = '<div id="main"></div>';
myTestDiv.innerHTML = mystr;
console.log(myTestDiv.querySelector('div#main'));
相关文章：