javascript 如何将 body 元素添加到空的 DOM 文档？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8010932/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I add a body element to an empty DOM document?
提问by Antoine
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.
我有这个代表页面主体的字符串，我想解析它的某些元素。我相信（随意反驳我）最好的方法是创建一个空文档，然后添加正文并使用标准的 JS 方法来获得我想要的。
但我似乎无法将正文添加到文档中。在 chrome 中，以下代码在第 2 行失败，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?
有什么办法可以实现我想要的吗？
采纳答案by Antoine
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:
无法编辑文档根元素的innerHTML，但可以对子节点进行编辑。所以，这有效：
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);
回答by JosefScript
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:
在 Firefox 50.0.2 中，您可以这样做：
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".
这里创建了正文并直接分配给“document.body”。一些阅读（https://html.spec.whatwg.org/multipage/dom.html#the-body-element-2）让我明白，文档的属性“body”可以是“null”或包含一个对象类型为“body”或（不推荐）“frameset”。
The following does notwork, i.e. produces a blank page, because the assignment to "document.body" is missing:
以下就不能工作，即产生一个空白页，因为分配给“document.body的”丢失：
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").
而不是document.body = body;您可以这样做： document.documentElement.appendChild(body);，而document.firstChild.appendChild(body);抛出错误（“HierarchyRequestError：节点无法插入层次结构中的指定点”）。
One might argue whether adding a paragraph by assessing innerHTML is the best way, but that's another story.
有人可能会争论通过评估 innerHTML 来添加一个段落是否是最好的方法，但那是另一回事了。
回答by B T
I noticed in recent versions of chrome, Antoine's answer doesn't work - you get a blank page. This, however, does work in chrome:
我注意到在最新版本的 chrome 中，Antoine 的回答不起作用 - 你得到一个空白页。但是，这在 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)
