Question

我想使用js在exsiting表中添加一行，但是我收到一个错误：document.getElementById（）为null，这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <title>use js to create one row</title>
</head>
<body >

<tr id="table">
    <td>row 1</td>
</tr>

<script>
    window.onload = function(){  
        var td = document.createElement("td");
        td.innerHTML = "add row";
        var tr = document.getElementById("table");
        tr.appendChild(rows); 
    }   
</script>
</body>
</html>

Answer 1

由于tr在表格之外无效，因此浏览器基本上完全忽略了tr元素，只是将文本row 1直接放在body中，这就是为什么getElementById没有返回元素;它在解析HTML时从未由浏览器创建。

将tr放入table（理想情况下放在tbody中）：

<table>
  <tbody id="tbody">
    <tr>
      <td>row 1</td>
    </tr>
  </tbody>
</table>

并附加到tbody，确保创建一行（tr）以及td，因为您明显的目标是添加一行：

var td = document.createElement("td");
td.innerHTML = "add row";
var tr = document.createElement("tr");
tr.appendChild(td);
document.getElementById("tbody").appendChild(tr);

在load上使用window事件也几乎没用。相反，只需将脚本放在HTML的最末端，就在结束</body>标记之前。

实例：

<table>
  <tbody id="tbody">
    <tr>
      <td>row 1</td>
    </tr>
  </tbody>
</table>
<script>
  (function() {
    var td = document.createElement("td");
    td.innerHTML = "add row";
    var tr = document.createElement("tr");
    tr.appendChild(td);
    document.getElementById("tbody").appendChild(tr); 
  })();
</script>

如何使用getElementById获取id为

1 个答案: