javascript - HTML/TS : textarea textContent disappears after creating another textarea or after button click

Question

我有一个 HTML 页面，其中包含一些文本区域，但我还动态添加更多文本区域。我使用 document.getElementById("textAreas").innerHTML += '<textarea class="textArea"></textarea>'; 在 html 文件中添加更多文本区域。问题是，每当我创建一个新的文本区域时，另一个新创建的文本区域的文本就会消失。但是从一开始加载的文本区域的文本不会消失。

编辑:

按添加按钮时文本消失的问题已经解决。当前的问题是，当我单击添加文本区域按钮之外的另一个按钮时，新制作的文本会消失。

这些是加载的标准:

按添加按钮两次后:

现在我填写一些数据:

现在我已经填写了所有文本区域。下图中的问题是，非标准文本区域在单击添加按钮后它们的文本消失了:

单击按钮后文本也会消失。 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>

.ts:

addField(){
    document.getElementById("textAreas").innerHTML += '<textarea class="textArea"></textarea>';
  }

saveAsDraft(){
    this.paramReport.isFinal = false;
    this.saveAndSend();
  }

  saveAsFinal(){
    this.paramReport.isFinal = true;
    this.saveAndSend();
  }

  saveAndSend(){
    var textAreaList = document.getElementsByClassName("textArea");
    this.paramReport.notes = [];
    for (let i = 0; i < textAreaList.length; i++) {
      //console.log(textAreaList[i].textContent);
      this.paramReport.notes.push(textAreaList[i].textContent);
    }
    let status: string;
    if (this.paramReport.isFinal) status = "FINAL"; else status = "DRAFT";
    this.reportsProvider.editReportFromList(this.paramReport);
    this.toastCtrl.create({
      message: 'Submitted report with id: ' + this.paramReport.id
      + ' made by ' + this.paramReport.submittedBy + ' as ' + status,
      duration: 2000,
      position: 'top'
    }).present();
    this.navCtrl.push(ReportOverviewPage);
  }

Answer 1

文本消失是因为使用当前的方式，您将删除整个 dom 节点，并使用新的文本区域重新渲染它们。您应该改用 document.createElement API。

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