添加一個新的單元格到已經存在的行

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

你接下來做什麼，完全由你...

Answer 2

既然你父元素，你已經找到了第一個孩子，你可以嘗試：

parent.insertBefore(el, parent.firstChild); 

這裏是鏈接.insertBefore文檔MDN

這裏是firstChild的文檔MDN

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