Menu
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.
919
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!
98
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With