jQuery：无法从构造的jQuery对象中查找元素返回undefined问题

• 拼接的HTML字符串存在语法错误：data变量中的h1结束标签缺失右尖括号，写法为</h1而非合法的</h1>，会导致HTML解析结构异常。
• DOM查找逻辑错误：$.parseHTML(html)会返回解析后的根级DOM节点数组，本例中数组的唯一元素就是id="rendered"的div节点。而jQuery的*find()方法只会查找当前匹配元素集合的后代元素，不会匹配集合自身包含的节点*，你相当于在div的子节点范围内查找id为rendered的元素，自然匹配不到目标，返回undefined。
  你之前注释的$($.parseHTML(html))写法只是把DOM数组包装成了jQuery对象，没有解决查找范围的问题，依然会返回undefined。

1. 首先修复HTML语法错误，补全h1标签的闭合尖括号：

var data = '<h1>Hi World</h1>'; // 补全结束标签的右尖括号
var html = '<div id="rendered">'+data+'</div>';

2. 调整元素查找逻辑，三种写法任选其一即可：

• 方案1：使用filter()替代find()，筛选当前jQuery集合内的目标根节点：

var content = $.parseHTML(html);
// filter用于匹配集合自身的元素，符合当前场景
console.log($(content).filter('#rendered').html()); 
// 正常输出: <h1>Hi World</h1>

• 方案2：给HTML字符串额外套一层父容器，让目标div成为父容器的后代节点，就可以正常使用find()查找：

var wrappedHtml = '<div>' + html + '</div>';
console.log($(wrappedHtml).find('#rendered').html());
// 正常输出: <h1>Hi World</h1>

• 方案3：省略手动调用$.parseHTML的步骤，直接把合法HTML字符串传入jQuery构造函数，内部会自动完成解析，再配合filter()获取目标即可：

var $content = $(html);
console.log($content.filter('#rendered').html());

内容的提问来源于stack exchange，提问作者Volatil3