Geek asks and answers

Can jquery manipulate a temporary document created using the DOM?

What I want to achieve is to manipulate a document created using the DOM using jquery, passing a large 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 add let say div to an existing div.

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

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

Since someone might argue about using the console for debugging, I provide below another piece of code that doesn't work:

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

chrome firefox, jquery.

+5
3

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


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

, innerHTML !

+3

, 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));
+2

, . secont jQuery. : http://jsfiddle.net/hDcUp/

var jq2 = jQuery(dom);
0

More articles:


All Articles