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,/ 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.
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./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.
Share Improve this question edited Mar 19, 2013 at 9:56 zabetak asked Mar 18, 2013 at 10:52 zabetakzabetak 4674 silver badges15 bronze badges3 Answers
Reset to default 4By 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!
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));
Yes its possible. You have to create secont instance of jQuery. Check this fiddle: http://jsfiddle/hDcUp/
var jq2 = jQuery(dom);