更好香草DOM元素定義JavaScript的

我想知道，如果有一個平滑的方式動態地創建此DOM塊：更好香草DOM元素定義JavaScript的

<tr> 
    <td>text</td> 
    <td><input type="checkbox"></td> 
</tr>

此功能允許我嵌套添加TR我TBODY：

function create_row() { 
      var row = document.createElement("TR"); 
      var cell1 = document.createElement("TD"); 
      var cell2 = document.createElement("TD"); 
      var checkbox = document.createElement("INPUT"); 
      var text = document.createTextNode(extract_textarea()); 

      checkbox.type = "checkbox"; 

      cell1.appendChild(text); 
      cell2.appendChild(checkbox); 
      row.appendChild(cell1); 
      row.appendChild(cell2); 

      return row; 
     }

PS我是Javascript的新手，所以每一個小費都表示讚賞，謝謝！

來源

2017-09-14 Nick97

要創建HTML表格，你想知道什麼？ –

答案是否定的。使用標準的DOM，這是如何創建一個提示和輸入行。 jQuery可以簡化這個 – mplungjan

如果你想要改進代碼的建議，請查看[CodeReview]（https://codereview.stackexchange.com）。 – Script47

您可以使用innerHTML在創建div得到你想要的HTML元素。

function createRow() { 
 
    const 
 
    div = document.createElement('div'); 
 
    div.innerHTML = '<tr><td>text</td><td><input type="checkbox"></td></tr>'; 
 
    
 
    return div.firstElementChild 
 
} 
 

 
const 
 
    newRow = createRow(), 
 
    tbody = document.getElementById('tbody'); 
 
    
 
tbody.appendChild(newRow);

<table> 
 
    <tbody id="tbody"> 
 
    </tbody> 
 
</table>

來源

2017-09-14 10:06:32 Thijs

function create_row() { 
    //var row = document.createElement("TR"); 
    var row = document.createElement("tr"); 

    //var cell1 = document.createElement("TD"); 
    //var cell2 = document.createElement("TD"); 

    //var checkbox = document.createElement("INPUT"); 
    //var text = document.createTextNode(extract_textarea()); 

    //checkbox.type = "checkbox"; 

    //cell1.appendChild(text); 
    //cell2.appendChild(checkbox); 

    //row.appendChild(cell1); 
    row.appendChild(`<td>${extract_textarea()}</td>`); 
    //row.appendChild(cell2); 
    row.appendChild(`<td><input type="checkbox" /></td>`); 


    return row; 
}

來源

2017-09-14 10:01:14 zynkn

更好香草DOM元素定義JavaScript的

回答

相關問題