不完全确定为什么我收到无法读取 null 错误消息的属性“innerHTML”答案

【问题标题】：Not completely sure why i am receiving Cannot read property 'innerHTML' of null error message不完全确定为什么我收到无法读取 null 错误消息的属性“innerHTML”
【发布时间】：2021-10-07 10:43:17
【问题描述】：

我正在尝试使用 JS 向 html 代码添加一个表格行，但我收到一条错误消息，指出“未捕获的 TypeError：无法读取属性 'innerHTML' of null”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table id="sampleTable" border="1">
        <tr>
            <td>Row1 cell1</td>
            <td>Row1 cell2</td>
        </tr>
        <tr>
            <td>Row2 cell1</td>
            <td>Row2 cell2</td>
        </tr>
    </table><br>
    <input type="button" onclick="insert_Row()" value="Insert row">
</body>
<script src="index.js"></script>
</html>


let table = document.getElementById(sampleTable);

function insert_Row() {
  let template = `<tr><td>Row3 cell1</td>
<td>Row3 cell2</td></tr>`;
  table.innerHTML += template;
}

【问题讨论】：

标签： javascript html html-table dom-events tr

【解决方案1】：

您使用了错误的语法。 id 或与字符串相关的任何内容都必须放在双引号内

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

let table = document.getElementById("sampleTable");

function insert_Row() {
  let template = `<tr><td>Row3 cell1</td>
<td>Row3 cell2</td></tr>`;
  table.innerHTML += template;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table id="sampleTable" border="1">
        <tr>
            <td>Row1 cell1</td>
            <td>Row1 cell2</td>
        </tr>
        <tr>
            <td>Row2 cell1</td>
            <td>Row2 cell2</td>
        </tr>
    </table><br>
    <input type="button" onclick="insert_Row()" value="Insert row">
</body>
<script src="index.js"></script>
</html>

【讨论】：

【解决方案2】：

您需要在id 中添加引号

let table = document.getElementById("sampleTable");
function insert_Row() {
  let template = `<tr><td>Row3 cell1</td>
    <td>Row3 cell2</td></tr>`;
  table.innerHTML += template;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table id="sampleTable" border="1">
        <tr>
            <td>Row1 cell1</td>
            <td>Row1 cell2</td>
        </tr>
        <tr>
            <td>Row2 cell1</td>
            <td>Row2 cell2</td>
        </tr>
    </table><br>
    <input type="button" onclick="insert_Row()" value="Insert row">
</body>

</html>

【讨论】：

【解决方案3】：

您必须将字符串作为参数提供给 getElementById 方法

let table = document.getElementById("sampleTable");

您似乎还想将表格行附加到表格中，innerHTML 属性将无济于事，因为它提供了指定元素的内部 html 文本，例如段落。要将元素附加到表格中，您必须首先通过 .createElement 创建表格行元素，然后使用 .append 或 .appendChild 方法将孩子附加到其父母中

let table = document.getElementById("sampleTable");

function insert_Row() {
    let template = document.createElement('TR');
    // then use the innerHTML property to insert data into your table row
    table.append(template);
}

也可以使用.insertRow方法直接插入行

https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement/insertRow

https://developer.mozilla.org/en-US/docs/Web/API/Element/append

【讨论】：