javascript - 原生 javascript 中 dom 元素的更好定义

Question

我想知道是否有更流畅的方法来动态创建这个 DOM block :

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

附注我是 Javascript 新手，因此非常感谢每一个提示，谢谢!

Answer 1

您可以在创建的 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>