javascript - 将新单元格添加到现有行

Question

我是 javascript 新手，我正在尝试仅使用 DOM 属性和方法将新单元格插入到现有行中，而无需硬编码或使用索引。我正在尝试添加新标签。该单元格需要先行，因为我要添加与该行对应的信息。任何帮助，将不胜感激。到目前为止，我有以下内容:

var firstTable = document.getElementsByTagName("music 
        header").nextChild();
        console.log(firstTable);

       var findRow = firstTable.getElementsByTagName("td");
       console.log(findRow);

    <div id = "music">
        <h2 id = "music header">Music</h2>
        <table style="width:100%">
            <tr id = "Hard Rock">
                <td>NEW CELL HERE</td>
                <td>Saint Asonia</td>
                <td>Shinedown</td>
                <td>Breaking Benjamin</td>
                <td>Rise Against</td>
                <td>Three Days Grace</td> 
            </tr>    
            <tr id = "Metal">
                <td>Bullet for my Valentine</td>
                <td>Metallica</td>
                <td>Korn</td>
                <td>Asking Alexandria</td>
                <td>Alexisonfire</td>
            </tr>
            <tr id = "Country">
                <td>Toby Kieth</td>
                <td>Keith Urban</td>
                <td>Taylor Swift</td>
                <td>Kenny Chesney</td>
                <td>Miranda Lambert</td>
            </tr>
        </table>
    </div>

Answer 1

代码:

var firstTable = document.getElementsByTagName("music 
    header").nextChild();
console.log(firstTable);

不会起作用，因为:

1. getElementsByTagName 需要标签名称，而不是 ID
2. getElementsByTagName 返回一个(可能为空)集合，而不是单个元素，并且该集合没有 nextChild 方法。
3. nextChild 不是任何标准 DOM 对象的有效属性，也许您想要 nextElementSibling ，这是一个属性，而不是一个方法
4. ID“音乐标题”无效，因为 ID attribute值不能包含空格。

要查找文档中的第一个表格，您可以使用:

var firstTable = document.getElementsByTagName('table')[0];

要获取表格的第一行，您可以使用:

var firstRow = firstTable.rows[0];

行的索引可以是从 0 到 firstTable.rows.length - 1 之间的任何值。

获取该行的第一个单元格:

var firstCell = firstRow.cells[0];

接下来做什么取决于你......