jquery 可以操作使用 DOM 创建的临时文档吗？答案

【问题标题】：Can jquery manipulate a temporary document created with DOM?jquery 可以操作使用 DOM 创建的临时文档吗？
【发布时间】：2013-03-06 16:27:35
【问题描述】：

我想要实现的是通过传递一个大的 html 字符串来操作使用 jquery 使用 DOM 创建的文档。考虑以下示例：

var doctype = document.implementation.createDocumentType( 'html', '', '');
var dom = document.implementation.createDocument('', 'html', doctype);
dom.documentElement.innerHTML = '<head><head><title>A title</title></head><body><div id="test">This is another div</div></body>';

这将在 dom 中创建一个包含所提供内容的新文档。现在我想使用 jquery 在现有的 div 中追加一个 div。

$('#test',dom).append('<div> A second div</div>');
console.log(dom);

当我在控制台中打印结果时，'dom' 的 innerHTML 似乎没有改变。从 jquery 的 API 文档中，http://api.jquery.com/jQuery/ 更具体的 "jQuery( selector [, context ] )" 函数应该允许这样做。

由于有人可能会争论使用控制台进行调试，因此我在下面提供了另一部分不起作用的代码：

$('body').append($('#test',dom));

在 chrome 和 firefox 中测试，它不适用于最新的 jquery 库。

【问题讨论】：

标签： javascript jquery html dom browser

【解决方案1】：

它似乎正在通过innerHTML 设置整个 HTML 内容，这是行不通的。

通过试验您的代码，您会注意到以下内容也不会产生任何结果：

dom.documentElement.getElementsByTagName('body')

而dom.body 就是null。但是，如果您要构造对象而不是仅设置 innerHTML，则上述和 jQuery 选择器都将起作用：

dom.body = document.createElement('body');
dom.body.appendChild(document.createElement('div'));

console.log($('div', dom));

【讨论】：

感谢您的建议，但从我的情况来看，使用整个字符串来创建文档很重要。单独创建每个元素非常耗时，尤其是在这是获取响应的情况下。另外，我非常好奇的是，为什么设置 innerHTML 一开始就不起作用？

【解决方案2】：

是的，这是可能的。您必须创建 jQuery 的第二个实例。检查这个小提琴：http://jsfiddle.net/hDcUp/

var jq2 = jQuery(dom);

【讨论】：

【解决方案3】：

通过更改构造函数并使用下面的行

var dom = document.implementation.createHTMLDocument("Test");

而不是原来介绍的两行

var doctype = document.implementation.createDocumentType( 'html', '', '');
var dom = document.implementation.createDocument('', 'html', doctype);

一切正常，即使直接设置innerHTML！

【讨论】：