10

Is there any way to create or recreate a javascript document Object by calling a function. Something like

<script type="javascript/text">
  var document = createDocument("some html");
</script>

I want to do this so I can solve the issue in this question client side xslt with javascript in firefox

Community
  • 1
  • 1
  • @PaulRoub this question and the related answers are dated Sep 2011, the duplicate is the other question dated Nov 2011. Duplication should be based on publication dates, the oldest is the original, please fix it. – Diego Perini Aug 14 '16 at 11:29

5 Answers5

11

Webkit was the first to include/expose the following method for that task:

document.implementation.createHTMLDocument(title);

Firefox, from version 4, also implements this method while for previous versions it is possible to create an HTML document using the following:

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

which should be roughly equivalent to a document having <!DOCTYPE html> (HTML5).

Replace the empty strings of 'createDocumentType' with the needed publicId/systemId.

It will be still necessary to create/append html, head and body elements to the resulting document to have a working DOM.

David Murdoch
  • 87,823
  • 39
  • 148
  • 191
Diego Perini
  • 8,003
  • 1
  • 18
  • 9
  • OK, but what if `document` is undefined? Is there a way to create a document _ex nihilo_? Surely there must be a constructor function? – Lori May 11 '13 at 01:47
  • 1
    @user1269964 then use `DOMImplementation` instead of `document.implementation`. https://developer.mozilla.org/en-US/docs/Web/API/DOMImplementation – m93a Sep 18 '13 at 13:24
  • 1
    **EDIT:** Sorry. Not `DOMImplementation` but `(new Document()).implementation` – m93a Sep 18 '13 at 14:48
5

You could try using document.implementation.createDocument. Once you have your document, you can use the innerHTML property to set HTML for it. If you want that wrapped in a neat little package you can do something like this:

function createDocument(html) {
    var doc = document.implementation.createDocument ('http://www.w3.org/1999/xhtml', 'html',  null);
    doc.documentElement.innerHTML = html;
    return doc;
}

And then you'd use the function like this:

var doc = createDocument("<body><span>Hello StackOverflow.com!</span></body>");

Let me know if this is what you were looking for.

Dan Herbert
  • 99,428
  • 48
  • 189
  • 219
3

if createDocument(...) gives you parse errors, adapt Dan's answer to use createHTMLDocument() instead:

function createDocument(html, title) {
  var doc = document.implementation.createHTMLDocument(title)
  doc.documentElement.innerHTML = html
  return doc
}

use as:

var doc = createDocument('<!DOCTYPE html><html>'
    + '<head><script src="foo.js"></script></head>'
    + '<body></body></html>', 'test')
console.log(doc.getElementsByTagName('script'))

output:

[script foo.js]
michielbdejong
  • 1,077
  • 9
  • 14
2

If you're looking to recreate a document (such as in an iframe) you can do so with...

document.open();
document.write('<html><head></head><body>some stuff</body></html>');
document.close();

here is how you could use it to recreate the document of a dynamically created iframe.

var iframe = document.createElement('iframe'),
    iframeDoc = (iframe.contentDocument) 
              ? iframe.contentDocument : iframe.contentWindow.document;

document.getElementById('iframeContainer').appendChild(iframe);

iframeDoc.open();
iframeDoc.write('<html><head></head><body>howdy</body></html>');
iframeDoc.close();
broox
  • 3,538
  • 33
  • 25
1

This works in Firefox:

document.implementation.createDocument(null, "rootElement", null)

Note that it gives you a XMLDocument, rather than a HTMLDocument (like document itself).

Matthew Flaschen
  • 278,309
  • 50
  • 514
  • 539