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

P.S。我是Javascript的新手，所以感谢每一个提示，谢谢！

Answer 1

+--- project :dagger-complier  
|    +--- com.google.android:android:4.0.1.2 (*)  
|    +--- com.google.android:support-v4:r7  
|    +--- com.google.auto.service:auto-service:1.0-rc2 (*)  
|    +--- com.squareup:javapoet:1.6.0 -> 1.8.0  
|    +--- javax.inject:javax.inject:1  
|    +--- com.google.auto:auto-common:0.4 -> 0.6 (*)<-----here is where went wrong
|    \--- com.google.dagger:dagger:2.0 (*)  
+--- com.jakewharton:butterknife-compiler:8.3.0    
|    +--- com.jakewharton:butterknife-annotations:8.3.0  
|    |    \--- com.android.support:support-annotations:24.1.0 -> 26.0.1  
|    +--- com.google.auto:auto-common:0.6 (*)  
|    +--- com.google.auto.service:auto-service:1.0-rc2 (*)  
|    \--- com.squareup:javapoet:1.7.0 -> 1.8.0

Answer 2

您可以在创建的innerHTML上使用div来获取所需的HTML元素。

＆＃13;

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

＆＃13;

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

＆＃13;

更好地定义vanilla javascript中的dom元素

2 个答案: