Question

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

Answer 1

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

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

而不是最初引入的两行

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

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

Answer 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));

Answer 3

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

var jq2 = jQuery(dom);

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

3 个答案: