How Can I Add A Body Element To An Empty DOM Document?

I have this string that represents the body of a page, which I would like to parse for some elements. I believe (feel free to contradict me) the best way to do so is to create an e

Solution 1:

As we are some years further than the originally accepted answer, I would like to give a more modern one.

In Firefox 50.0.2 you can do this:

document.body = document.createElement("body");
document.body.innerHTML = "<p>Hello World!</p>";

Here the body is created and directly assigned to "document.body". Some reading (https://html.spec.whatwg.org/multipage/dom.html#the-body-element-2) made me understand, that the document's attribute "body" can either be "null" or contain an object of type "body" or (not recommended) "frameset".

The following does not work, i.e. produces a blank page, because the assignment to "document.body" is missing:

var body = document.createElement("body");
body.innerHTML = "<p>Hello World!</p>";

Instead of document.body = body; you can do this: document.documentElement.appendChild(body);, whereas document.firstChild.appendChild(body); throws an error ("HierarchyRequestError: Node cannot be inserted at the specified point in the hierarchy").

One might argue whether adding a paragraph by assessing innerHTML is the best way, but that's another story.

Solution 2:

I noticed in recent versions of chrome, Antoine's answer doesn't work - you get a blank page. This, however, does work in chrome:

var dom = document.implementation.createDocument('http://www.w3.org/1999/xhtml', 'html', null);
var body = dom.createElement("body");
dom.documentElement.appendChild(body);

// set timeout is needed because document.body is created after the current continuation finishes
setTimeout(function() {    
  document.body.innerHTML = "Hi"
},0)

Solution 3:

It's not possible to edit the innerHTML of the document's root element, but doing so of a child node is possible. So, this works:

    var dom = document.implementation.createDocument('http://www.w3.org/1999/xhtml', 'html', null);
    var body = dom.createElement("body");
    body.innerHTML = "<p>hello world</p>";
    dom.firstChild.appendChild(body);