Can jquery manipulate a temporary document created with DOM?

问题

The thing that I want to achieve is to manipulate a document created with DOM using jquery by passing a big html string. Consider the following example:

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>';

This will create a new document in dom, with the content provided. Now I want to use jquery to append let's say a div inside the existing div.

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

When I print the result in the console it seems that the innerHTML of the 'dom' has not changed. From the API documentation of jquery,http://api.jquery.com/jQuery/ more specific "jQuery( selector [, context ] )" function should allow this.

Since someone may argue about using the console to debug, I am providing below another part of code that does not work:

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

Tested in chrome and firefox and it does not work with the latest jquery library.

回答1:

By changing the constructors and using the line below

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

instead of the two lines originally introduced

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

everything works fine, even when setting the innerHTML directly!

回答2:

It would appear that it is setting the entire HTML content through innerHTML that does not work.

From experimenting with your code, you'll notice that the following doesn't yield any result either:

dom.documentElement.getElementsByTagName('body')

And that dom.body is null. However, if you would construct the objects rather than to just set the innerHTML, both the above and the jQuery selectors will work:

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

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

回答3:

Yes its possible. You have to create secont instance of jQuery. Check this fiddle: http://jsfiddle.net/hDcUp/

var jq2 = jQuery(dom);

来源：https://stackoverflow.com/questions/15475068/can-jquery-manipulate-a-temporary-document-created-with-dom

标签

javascript

jquery

html

dom

browser