来自完整 HTML 文档的 jQuery 对象答案

【问题标题】：jQuery object from complete HTML document来自完整 HTML 文档的 jQuery 对象
【发布时间】：2010-11-11 14:55:19
【问题描述】：

是否可以将完整的 HTML 文档解析为完整的 jQuery 对象？当我尝试时，例如

var $tmp = $("<html><head><title>title</title></head><body><p id='test'>test</p></body></html>");
console.log($tmp);

我明白了：

[+] [title, p#test] []

即一个数组，将头部的所有孩子与身体的所有孩子组合在一起。是不是不能保留结构，包括html、head、body元素？

【问题讨论】：

你为什么要用$符号包装html？？？
@gov - 这就是在 jQuery 中创建元素的方式。
@patrick ，我们可以简单地使用字符串连接并在右端做一个 .html 。
@gov - 我认为 OP 想要 DOM 元素。 .html() 方法会给你一个字符串。
奇怪的是，$('<html />') 确实生成了一个包含 html 元素的 jQuery 对象。

标签： jquery dom

【解决方案1】：

jquery 去掉了 html 和 body，因为一个文档中只能有一个 html 和 body。 Brian 的答案是你能得到的最接近的答案，但仅限于非 IE 浏览器，因为 IE 不解析非 html 标签。

例如：

var test = "<test>This is it</test>";
alert($(test).html());  // display This is it in non IE browser (working in 8-9?).

编辑：用 div class=html/body 替换 html 和 body 怎么样？

var test = "<html><body><div>this is a test</div></body></html>";
test = test.replace(/(\/body|\/html)/i, "\/div")
           .replace(/html/i, "div class='html'")
           .replace(/body/i, "div class='body'");
console.log($(test));

【讨论】：

您当然可以在 DOM 中创建额外的 html 和 body 元素，至少在某些实现中（仅在 WebKit 中测试，使用 document.createElement）。您甚至可以将它们附加到其他元素 (element.appendChild)。 jQuery 去掉了这些，因为在常见的用例中开发人员想要这样做是非常罕见的，但很常见的是他们只想将来自 Ajax 调用的服务器响应转储到某个地方的 div 中。
@eylidlessness，你是对的，我在 FF 中测试了将第二个正文附加到 html（不在 div 内）并显示第二个正文，但在 IE 中，不显示第二个正文。我想，我会坚持使用“正确”的 html 结构:)。

【解决方案2】：

我认为 jQuery 使用浏览器的原生 innerHTML 在这种情况下创建元素。因此，有些浏览器允许，有些则不允许。我认为它适用于 Firefox，但不适用于 IE。

也许您可以尝试使用原生 document.createElement() 将其拼凑起来。不确定它是否会起作用。

【讨论】：

谢谢，帕特里克。火狐没有运气。我真正想做的只是使用 jQuery 的核心功能来解析通过 AJAX 获取的 HTML 文档。看来我得自己多做一点工作了……
@Bobby - 不客气。是的，可能需要一些手动解析，具体取决于您要实现的目标。

【解决方案3】：

一种技巧是将“html”节点字符串替换为“html”以外的其他内容。

var tmp = '<html><head><title>title</title></head><body><p id="test">test</p></body></html>';
tmp = tmp.replace(/html/g, 'html1');
console.log($(tmp));

我不确定我是否真的喜欢这个想法......

【讨论】：