HTML/TS : 다른 텍스트 영역을 만들거나 버튼을 클릭 한 후 텍스트 콘텐츠가 사라집니다.

Question

몇 개의 텍스트 영역이 포함 된 HTML 페이지가 있지만 동적으로 더 많은 텍스트 영역을 추가합니다. document.getElementById("textAreas").innerHTML += '<textarea class="textArea"></textarea>';을 사용하여 html 파일에 textareas를 추가합니다. 문제는 새로운 텍스트 영역을 만들 때마다 새로 만든 텍스트 영역이 텍스트가 사라진다는 것입니다. 그러나 텍스트의 처음부터로드 된 텍스트 영역은 사라지지 않습니다.

편집 :

사라지는 텍스트의 문제 추가 버튼이 사라 압박. 현재 문제는 텍스트 영역 추가 버튼이 아닌 다른 버튼을 클릭하면 새로 만든 텍스트가 사라진다는 것입니다.

이러한 것들에 장착 된 표준 :

추가 버튼을 두 번 누른 후 : 그래서 지금

: 나는 일부 데이터를 입력 이제

을 모든 텍스트 영역이 채워져 있습니다. 다음 이미지의 문제는 표준이 아닌 텍스트를 클릭 한 후 사라지는 것입니다. 추가 버튼 :

버튼을 클릭하면 텍스트가 사라집니다. html로 및 TS 파일은 다음과 같습니다 :

.html 중에서

.TS :

가지고있는 현재의 방법으로는 전체 DOM 노드를 제거되기 때문에 텍스트가 사라

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

, 새 텍스트 영역으로 다시 렌더링합니다. 대신 document.createElement API를 사용해야합니다.

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