關閉JavaScript HTML5替換innerHTML

Question

所以即時通訊設法制作一個表格，添加3 Textareas的內容。

我成功地加入他們，但只能用innerHTML的但我現在掙扎與DOM的風格，以取代innerHTML的（例如，appendChild等）

表：

<header class="datagrid"> 
<h1> Zitatenbaum </h1> 
<table id ="ZitatenOrdnung"> 
    <thead> 
     <tr> 
      <th>Zitat</th> 
      <th>Autor</th> 
      <th>Ihre Bewertung </th> 
     </tr> 
    </thead> 
</table> 
</header> 

形式：

<form> 
     <textarea rows = "5" cols = "60" placeholder="Zitat einfügen" id = "Zitat1"> </textarea> 
     <input type ="text" id="Autor1" placeholder="Autor einfügen"/> 
     <input id="Bewertung" type="text" placeholder="Bewertung von 1-10" /> 
    <button id = "Einreichen">Einreichen </button> 
    <button id = "Löschen">Löschen</button> 
    </form> 

腳本：

<script> 

    document.getElementById("Add").innerHTML = "Add"; 
    document.getElementById("Add").addEventListener("click", 
     function(e){ 
      e.preventDefault(); 
       if((document.getElementById("Autor1").value !== "" && document.getElementById("Quote1").value !== ""&& (document.getElementById("Rating" 
        ).value > 1) && document.getElementById("Rating").value < 10)){ 
        var table = document.getElementById("ZitatenOrdnung"); 
        var row = table.insertRow(1); 
        var cell1 = row.insertCell(0); 
        var cell2 = row.insertCell(1); 
        var cell3 = row.insertCell(2); 
        var cell4 = row.insertCell(3); 
        cell1.lastChild.nodeValue = ('"' + document.getElementById("Quote1").value + '"'); 
        cell1.setAttribute('contentEditable', 'true'); 
        cell2.innerHTML = ("~" + document.getElementById("Autor1").value); 
        cell3.innerHTML = (document.getElementById("Rating").value); 
        cell3.setAttribute('contentEditable', 'true'); 
        cell3.style.textAlign = 'center'; 

Answer 1

您插入的單元格爲空，它們沒有兒童，因此lastChild未定義。

您可以追加，而不是textNode：

cell1.appendChild(document.createTextNode('"' + document.getElementById("Zitat1").value + '"')); 

目前也沒有與ID Quote1（我猜你的意思是Zitat1）