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!

Griffen

Have you tried appendChild? append is experimental and not on all browsers. – Lal

@AndrewLi No, not yet. I'm converting existing working .js code into typescript. So, I was hoping I wouldn't have to change any internals and could just create the typescript "container". – Griffen

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

Kendricks

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)

Kingship

This is a good solution. Better syntax would be: (myElement as any).append(otherElement) – Rebekah

Answer 3

Element.append() now exists (since 2016). If TypeScript is finding an error:

• Types: ensure that it's an Element and not just a Node
• Config: ensure you're loading the DOM library
• Config: ensure you're using a recent ES target/lib

Example config:

{
  "compilerOptions": {
    "target": "es2020",
    "lib": ["dom", "es2019", "es2020", "dom.iterable"]
  }
}

Capillary