Javascript HTML/TS:textarea textContent在创建另一个textarea或单击按钮后消失

我有一个HTML页面，其中包含一些文本区域，但我也动态添加了更多的文本区域。我使用

document.getElementById（“textareas”）.innerHTML+=''在html文件中添加了更多的文本区域。问题是，每当我创建一个新的textarea时，另一个新创建的textarea的文本就会消失。但是从一开始加载的文本区域不会消失

编辑：

按下“添加”按钮时文本消失的问题消失了。当前的问题是，当我单击“添加文本”区域以外的另一个按钮时，新生成的文本将消失

这些是标准的加载方式：

按下添加按钮2次后：

现在我填写一些数据：


现在我把所有的文本区域都填好了。下一幅图中的问题是，非标准的文本在单击“添加”按钮后消失：

单击按钮后，文本也会消失。html和ts文件如下所示：

.html：

<ion-content class="master">
  <div class="reportList">
    <div *ngFor="let note of paramReport.notes">
      <textarea class="textArea">{{note}}</textarea>
    </div>
    <div id="textAreas"></div>
    <button ion-button color="avioBlue" (click)="addField()">
      <ion-icon name="add-circle"></ion-icon>
    </button>
    <ion-grid>
      <ion-row>
        <ion-col col-6>
          <button ion-button block color="avioOrange" (click)="saveAsDraft()">Save as draft</button>
        </ion-col>
        <ion-col col-6>
          <button ion-button block color="avioRed" (click)="saveAsFinal()">Save as final</button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
</ion-content>


{{note}}
另存为草稿
另存为最终版本

.ts:

addField（）{
document.getElementById（“textAreas”）.innerHTML+=''；
}
saveAsDraft（）{
this.paramReport.isFinal=false；
这是saveAndSend（）；
}
saveAsFinal（）{
this.paramReport.isFinal=true；
这是saveAndSend（）；
}
saveAndSend（）{
var textAreaList=document.getElementsByClassName（“textArea”）；
this.paramReport.notes=[]；
for（设i=0；i
文本将消失，因为按照当前的方式，您将删除整个dom节点，并使用新的文本区域重新渲染它们。您应该改用document.createElement API

var textarea= document.createElement("textarea");
textarea.className = "textArea";
document.getElementById("textAreas").appendChild(textarea);  

这解决了添加另一个文本区域时文本消失的问题。下一个问题是，当我单击一个按钮时，文本消失，当I console.log时，它会记录空格@orabisSo addField，现在工作正常，但您在saveAsDraft和saveAsFinal方面仍然存在问题？是的，在我按下其中一个按钮后，文本消失@Orabist这里有一些方法，例如this.reportsProvider.editReportFromList和this.toastCtrl.create.present，我不知道它们是做什么的。代码中是否有表格提交？能否尝试在每个方法的开头添加event.preventDefault（）？您还需要将事件参数添加到这些方法中。
var textarea= document.createElement("textarea");
textarea.className = "textArea";
document.getElementById("textAreas").appendChild(textarea);