How to avoid typescript error: Property 'innerHTML' does not exist on type 'Element'

Question

I\'m trying to place some HTML inside a specific div. When I try this in typescript I get this error: Property \'innerHTML\' does not exist on type \'Element\'

Answer 1

The only type-safe way to modify DOM elements is to verify they exist first. TypeScript is smart enough to tell you that document.querySelector can return null when the target is not found in the document.

document.body.innerHTML = '
'

let myContainer: HTMLDivElement | null = document.querySelector("#myDiv");

if (myContainer instanceof HTMLDivElement) {
    myContainer.innerHTML = '
Test
';
}

The above code compiles without error in TypeScript 3.2.1.