javascript - jQuery 可以操作用 DOM 创建的临时文档吗？

我想要实现的事情是通过传递一个大的 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 库无法工作。

答案＃1

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

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

而不是最初引入的两条线

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

一切正常，即使直接设置 innerHTML 也是如此！

答案＃2

看起来是通过 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));