CODEWITHSUNDEEP
javascriptjqueryhtmldombrowser
zabetak
zabetak

Reputation: 457

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.

Upvotes: 6

Views: 4463

Answers (3)

zabetak
zabetak

Reputation: 457

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!

Upvotes: 4

Kasyx
Kasyx

Reputation: 3200

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

var jq2 = jQuery(dom);

Upvotes: 0

David Hedlund
David Hedlund

Reputation: 129792

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

Upvotes: 2

Related Questions