香草javascript中dom元素的更好定义

Question

我想知道是否有一种更平滑的方法来动态创建此DOM块：

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

这个函数允许我在我的tbody中添加一个嵌套的tr：

 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我是Java的新手，所以对每个技巧都表示赞赏，谢谢！

Answer 1

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;
}

Answer 2

您可以在创建的div上使用innerHTML来获取所需的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>