Question

我正在尝试在javascript中动态创建html文档对象并将其链接到页面上的按钮。但是，当我运行下面的代码时，出现以下错误：“ TypeError：Document.body属性必须是HTMLElement的实例。” MDN Web API文档指出：“在HTML文档中，document.createElement（）方法创建由tagName指定的HTML元素。”为什么我会收到此错误？如何动态创建html文档？

window.onload = function() {
    var new_document = new Document();
    var new_body = new_document.createElement("body");
    new_document.body = new_body;
}

Answer 1

这个问题已经回答。 How to create Document objects with JavaScript

查看MDN以了解https://developer.mozilla.org/en-US/docs/Web/API/DOMImplementation/createHTMLDocument

新的Document（）构造函数不是这样使用的。如果您在浏览器中使用控制台，则可以找到出现此错误的原因...


let doc = new Document();
doc.body;
// < null
doc.doctype;
// < null
// doc.doctype is a read only property also.
doc.__proto__;
// < Document {…}

// ‘document’ is the document the browser already created.

document.doctype;
// < “<!doctype html>“
document.__proto__;
//HTMLDocument {constructor: ƒ, Symbol(Symbol.toStringTag): "HTMLDocument"}

let body1 = doc.createElement('body');
let body = document.createElement('body');

body1.__proto__;
// Element {…}
body.__proto__;
// < HTMLBodyElement {…}

doc.body = body1;
// < Type Error: Not of type HTMLElement

// Now use the body element created by 'document'.

doc.body = body;
// Uncaught DOMException: Failed to set the 'body' property on 'Document': No document element exists.

// The body needs an document element to become a child node of.

let html = document.createElement('html');
doc.appendChild(html);
doc.body = body;
// No errors

doc.body;
// <body></body>

我们可以看到新的Document（）构造函数使用Document的原型制作了一个完全空白的Document。当您从中创建元素时，这些元素将具有Element的原型。

浏览器创建的名为Document的Document具有HTMLDocument的原型，并且它创建的元素具有HTMLElement的原型。这就是doc.body的设置者正在寻找的东西。

为什么我不能分配给动态创建的html文档的正文？

1 个答案: