Why do elements created under a `new Document` contain the wrong prototype?

Because you have an instance of Document and not HTMLDocument, it'll create an Element, not an HTMLElement. Document and Element are basic interfaces to shared by all document types. EG an HTMLDocument will create an HTMLElement.

From MDN,

The Document interface describes the common properties and methods for any kind of document. Depending on the document's type (e.g. HTML, XML, SVG, …), a larger API is available: HTML documents, served with the "text/html" content type, also implement the HTMLDocument interface, whereas XML and SVG documents implement the XMLDocument interface.

Element is the most general base class from which all objects in a Document inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from Element. For example, the HTMLElement interface is the base interface for HTML elements, while the SVGElement interface is the basis for all SVG elements. Most functionality is specified further down the class hierarchy.

You probably want to use DOMImplementation.createHTMLDocument() to create a HTML Document.


The Document constructor is not specific to HTML (as there are XML documents), you need to construct an HTMLDocument, but its constructor is uncallable.

As the comments mention, the correct way to create a document is via the DOMImplementation#createHTMLDocument method.

var doc = document.implementation.createHTMLDocument();
var d = doc.createElement('div');
d instanceof Element; // true;
d instanceof HTMLDivElement; // true
d.constructor.name; // "HTMLDivElement"

From what I can gather, there has been a separation at some point from a general-purpose document (which was shared for HTML and XML) into two distinct constructors. At the same opportunity, they made the new constructors uncallable, and added the .createDocument() (for XML) and .createHTMLDocument() (for HTML) methods.