Typescript Error: Property 'append' does not exist on type 'HTMLElement'

Question

The Problem:

I'm receiving a Typescript 2.2.1 compilation error when trying to append a compiled angular 1.5 template to an existing HTMLElement.

Code:

$document.find(scope.target)[0].append($compile(menu)(scope)[0]);

Compile error:

[ts] Property 'append' does not exist on type 'HTMLElement'

I've searched through the type definitions and don't see a signature for append().

Any ideas as to which type or version of typescript I should be using?

Thanks!

Answer 1

Here there is nothing to do with TypeScript.

The correct method to call is appendChild:

https://developer.mozilla.org/en/docs/Web/API/Node/appendChild

append is a jQuery method, and if you want to use that you could do:

$document.find(scope.target).append($compile(menu)(scope)[0]);

and it should work too.

I hope it helps

Answer 2

There is an append/prepend function on HTMLElement. The problem that it is currently still experimental.

In order to use it without getting errors from TypeScript I used it as any ¯\_(ツ)_/¯ (<any>myElement).append(otherElement)