83

I am trying to instantiate new HTMLDivElement in TypeScript

var elem = new HTMLDivElement();

but the browser throws

Uncaught TypeError: Illegal constructor.

The workaround seems to be to use

var elem = document.createElement('div');

but I find this suboptimal for various reasons.

Why can't I instantiate DOM elements directly when there is a new keyword for in in the lib.d.ts?

declare var HTMLDivElement: {
    prototype: HTMLDivElement;
    new (): HTMLDivElement;
}

3 Answers 3

105

Note that the error you get here is "Illegal constructor". This is different from the error "object is not a function" that you would get if you were to write new {}(), for example.

So, technically, HTMLDivElement does have a constructor. It's just that this particular constructor throws an exception rather than creating an object.

Normally lib.d.ts would just exclude such useless signatures, but TypeScript requires that the right-hand side of the instanceof operator have a constructor. In other words, it's legal to write foo instanceof HTMLElement, but not foo instanceof [], and the difference is determined by the fact that HTMLElement has a constructor.

There were basically three choices on the table here:

  1. Remove the construct signature from the DOM elements and remove the restriction on instanceof's right operand. This is undesirable because you'd really prefer to catch errors where someone accidentally writes code like x instanceof foo instead of x instanceof Foo (where foo is an instance of Foo).
  2. Remove the construct signature from DOM elements, but keep the instanceof check in place. This is bad because foo instanceof HTMLElement is a very reasonable thing to write.
  3. The current situation, where the constructors exist but you have to know not to call them.

You can't construct DOM elements using normal constructors because you're supposed to go through document.createElement. This is basically for technical reasons relating to how browsers implement these objects.

8
  • 4
    Amazing explanation. Would it be possible to have a comment in lib.d.ts explaining this? Or you don't want to pollute lib.d.ts with comments? Oct 7, 2014 at 9:18
  • 8
    Would it make sense to add a warning or error from tsc for code that invokes constructors on subclasses of Element? Oct 8, 2014 at 8:15
  • If you extend HTMLElement, for example class Thing extends HTMLElement then you CAN use new to create an instance with let t = new Thing(). Then you can add it to the DOM!
    – Kokodoko
    Jul 18, 2017 at 19:56
  • This appears not to be the case, Kokodoko: class Thing extends HTMLElement {} ; let t = new Thing() results in TypeError: Illegal constructor.
    – user2467065
    Sep 15, 2017 at 0:28
  • 1
    customElements.define( 'custom-tag', Thing ); then call new Thing() - which returns <custom-tag></custom-tag>
    – flcoder
    Sep 2, 2018 at 6:02
39

You have mistaken typescript syntax with c# syntax.

Just replace

var elem = new HTMLDivElement();

with one of the following

var elem = document.createElement('div');

or

var elem = <HTMLDivElement>(document.createElement('div'));

or

let elem = document.createElement('div') as HTMLDivElement

(if you need to use HTMLDivElement attributes)

0
9

If you extend HTMLElement or any subclass like HTMLDivElement

You also need to register the custom element


class SampleDiv extends HTMLDivElement{
    constructor(){
       super();
    }
}
customElements.define('sample-div', SampleDiv, { extends: 'div' });

See more here: https://javascript.info/custom-elements

2
  • 1
    If I'm not mistaken, you need to add {extends:'div'} as the third argument to the define function: As in: customElements.define('sample-div', SampleDiv, { extends: 'div' }); Nov 19, 2019 at 13:37
  • saved me thank you
    – Jon Forhan
    Jul 23 at 19:16

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.