CODEWITHSUNDEEP
javascriptangularjstypescripttypescript2.2
Zengineer
Zengineer

Reputation: 538

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

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!

Upvotes: 8

Views: 18327

Answers (3)

fregante
fregante

Reputation: 31749

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"]
  }
}

Upvotes: 0

gmadar
gmadar

Reputation: 1904

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)

Upvotes: 1

quirimmo
quirimmo

Reputation: 9988

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

Upvotes: 9

Related Questions