How to create HTML DOM Node using Object.create() in JavaScript?

Question

I was reading Chromium webui source code: ui.js ( line +48, +95 ), which is using __proto__ to morph a class into inheriting some other class.

Then I read some posts to learn __proto__:

• This and this says the prototype chain is internally maintained by JS VM and always exist, and you can modify it with __proto__ pseudo property ( a accessor ).
• Another post says by hooking up the internal prototype you can manually morph a class into derived from another class.
• 4th post says some browser does not expose its internal prototype chain so you should avoid extending(using) HTMLXXXElement.prototype .
• Finally, MDN said __proto__ is deprecated.

Then naturally, I thought there should be another way to create a DOM node by using Object.create(), then insert it into the DOM, but I tried following and failed:

var xt = document.querySelector('#list > div:nth-child(2)');
var list = xt.parentNode;
var o = Object.create(HTMLElement.prototype);
o.innerHTML = 'This should be a Element Node';
list.insertBefore(o, xt);   // this line throws error

Chrome give me error:

Uncaught TypeError: Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'.

I guess that I must have misunderstood HTML element Node class, and the way I use Object.create() must be wrong... But I do not know how to phrase the question, after searching a lot I still can not find out the answer.

Do I have to use document.createElement('a tag name'), to create a DOM Node ?

Is it possible to create a DOM node using Object.create(HTMLElement.prototype), and avoid using __proto__ at the same time ?

Thanks a million.

Answer 1

All you did when you created the object is assign its __proto__ attribute, or prototype, to the HTMLElement. That doesn't automatically make it a Node, it is still just a regular Javascript object, though its one that has access to the HTMLElement methods through its prototype chain.

You are right, you need to use createElement to create a DOM node. Its important to remember that the DOM isn't something inherent within Javascript. Its really just a special sort of 'interface' that uses Javascript for building purposes.

document.createElement() is a method provided by the browser specifically to build an HTML element as it conforms to the browsers DOM implementation. You theoretically could create a function that mimics Chromiums implementation, but it'd be a pointless effort.

Object.create() is a built-in Javascript function. It is there to create Javascript objects in all their forms. document.createElement() is not a built-in Javascript function, its provided by the browser for DOM manipulation.