6

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

4

3 回答 3

4

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

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

而不是最初介绍的两条线

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

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

于 2013-03-19T10:09:23.167 回答
2

似乎它正在设置整个 HTML 内容innerHTML，这不起作用。

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

dom.documentElement.getElementsByTagName('body')

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

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

console.log($('div', dom));
于 2013-03-18T11:00:41.710 回答
0

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

var jq2 = jQuery(dom);
于 2013-03-18T14:35:25.973 回答