Menu
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 empty document, then add the body and use standard JS methods to get what I want.
But I don't seem to be able to add the body to the document. In chrome, the following code fails on line 2 with NO_MODIFICATION_ALLOWED_ERR: DOM Exception 7.
var dom = document.implementation.createDocument('http://www.w3.org/1999/xhtml', 'html', null);
dom.firstChild.innerHTML = "<body><p>Hello world</p></body>";
Is there any way to achieve what I want?
865
To add a new element to the HTML DOM, you must create the element (element node) first, and then append it to an existing element.
The Document. append() method inserts a set of Node objects or string objects after the last child of the document. String objects are inserted as equivalent Text nodes. This method appends a child to a Document . To append to an arbitrary element in the tree, see Element.
To insert an element into the body tag: Create an element using the document. createElement() method.
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.
87
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)
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
