.insertRow() is not working well when is empty

Question

when I try to insert a row to empty of my table, it added row to that is not empty, but not to .

Example:

EDIT

Solution: , but it's not very clear...

user_1425882 · Answer

A table has three parts of: thead, tbody and tfoot. There is no reason your code to insert a new row to tbody, as you want. if you want to add a row in tbody you need to mention it. In your coed make a little change:

function myFunction() {
  var table = document.getElementById("myTable").getElementsByTagName('tbody')[0];
  var row = table.insertRow();
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  cell1.innerHTML = "NEW CELL1";
  cell2.innerHTML = "NEW CELL2";
}

user_15153906 · Answer

You can use var table = document.querySelector("#myTable tbody"); if you want to add a row in tbody you need to mention the exact location like i did with document.querySelector("#myTable tbody");.

.insertRow() is not working well when <tbody> is empty

2 Answers