How to add innerhtml in typescript?

Question

I am using typescript in my application.

html code:

<input type="text" name="lastname" id="last">

Typescript code:

let myContainer = <HTMLElement>document.getElementById('last');
myContainer.innerHTML = "";

I want to set the empty value for the last name field using typescript. I am using above code. But cannot able to add empty value using typescript.

I also tried by using below code:

document.getElementById('last').innerHTML = "";

How to assign empty value for the textbox using typescript?

Nitzan Tomer · Accepted Answer · 2017-08-16 11:31:23Z

6

Html input elements have the value property, so it should be:

let myContainer = document.getElementById('last') as HTMLInputElement;
myContainer.value = "";

Notice that I also used HTMLInputElement instead of HTMLElement which does not have the value property.

answered Aug 16, 2017 at 11:31

Nitzan Tomer

166k51 gold badges330 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Harshit Singhai · Accepted Answer · 2019-07-02 18:09:55Z

4

You can also use it like this

const element: HTMLElement = document.getElementById('personDetails') as HTMLElement
element.innerHTML = 'Hello World'

Works in Typescript 2.0

answered Jul 2, 2019 at 18:09

Harshit Singhai

1,28812 silver badges7 bronze badges

Comments

Sandeep Bhaskar · Accepted Answer · 2017-08-16 13:35:51Z

1

You can use model value to bind to the element instead of using the id and inner html

Html code:

<input type="text" name="lastname" id="last" ng-model="innerHtml">

Typescript code:

let innerHtml :string = "";

OR

if you want to use the inner Html by id then you have to use this

TypeScript uses '<>' to surround casts Typescript code:

let element = <HTMLInputElement>document.getElementById("last");
element.value = "Text you want to give";

answered Aug 16, 2017 at 13:35

Sandeep Bhaskar

3002 silver badges12 bronze badges

Comments

Jaxoo Jack · Accepted Answer · 2022-01-24 22:50:37Z

0

this is not a good practice, what we define in this way is not always the correct type.

let myContainer = document.getElementById('last') as HTMLInputElement;
myContainer.value = "";

or

const element: HTMLElement = document.getElementById('personDetails') as HTMLElement
element.innerHTML = 'Hello World'

if it is input use just HTMLInputElement

answered Jan 24, 2022 at 22:50

Jaxoo Jack

704 bronze badges

Collectives™ on Stack Overflow

How to add innerhtml in typescript?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related