如何在typescript中添加innerhtml？

Question

我在我的应用程序中使用typescript。

html代码：

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

打字代码：

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

我想使用typescript为姓氏字段设置空值。我正在使用上面的代码。但无法使用typescript添加空值。

我也尝试过使用下面的代码：

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

如何使用typescript为文本框赋空值？

Answer 1

Html输入元素具有value属性，因此它应该是：

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

请注意，我还使用了HTMLInputElement而不是没有value属性的HTMLElement。

Answer 2

您也可以像这样使用它

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

在Typescript 2.0中工作

Answer 3

可以使用模型值来绑定到元素，而不是使用id和内部html。

Html代码：

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

打字代码：

let innerHtml :string = "";

或

如果您想通过id使用内部Html，那么您必须使用以下代码

TypeScript使用'<>‘来包围类型转换代码：

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