Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

由于你有父元素，并且你找到了第一个孩子，你可以尝试：

parent.insertBefore(el, parent.firstChild);

以下是MDN

上.insertBefore文档的链接

以下是MDN

上firstChild的文档

Answer 2

代码：

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

不能上班，因为：

getElementsByTagName 需要标记名称，而不是ID
getElementsByTagName 返回一个（可能为空）集合，而不是单个元素，并且该集合没有 nextChild 方法。
nextChild 不是任何标准DOM对象的有效属性，也许你想要nextElementSibling，这是一个属性，而不是方法
id＆＃34;音乐标题＆＃34;由于ID attribute值不能包含空格，因此无效。

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

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

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

var firstRow = firstTable.rows[0];

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

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

var firstCell = firstRow.cells[0];

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

Answer 3

很难从你的问题中确切地知道你正在努力实现的目标。也就是说，基于Sgnl和RobG的答案以及后者对你的结构和参考文献的观点，这里有一些值得思考的东西。

我假设您想在一个部分中找到该表。您可以通过首先按ID查找部分，然后在下面的表格中找到：

var firstTable = document.getElementById("music").getElementsByTagName("table")[0];

您的HTML示例意味着您希望将单元格添加到第一行。您可以在以前找到的表中找到该行：

var findRow = firstTable.rows[0];

现在我们已经找到了我们的插入位置，让我们构建我们的新单元格

var newCell = document.createElement("td");
var newTag = document.createElement("span");
var newText = document.createTextNode("NEW CELL HERE");
newCell.appendChild( newTag );
newTag.appendChild( newText );

建立节点后，让我们插入

findRow.insertBefore( newCell, findRow.childNodes[0] );

这是一个有效的JS Fiddle演示

将新单元格添加到现有行

3 个答案: