Insert row is not a function

Question

I am trying to display my results and I am getting an error: "insertRow is not a function. Not sure how I can fix this.

JS file:

function sayHelloCallback (response) {
   var table = document.getElementById("wheel");

   for(i = 0; i < response.message.length; i++)
   {
       var row = table.insertRow(0);
       var cell = row.insertCell(0);
       cell.innerHTML = response["message"][i];
   }
}

HTML File:

<div class="w3-container w3-padding-64 w3-center" id="salaries">
   <h2>View Salaries</h2>
   <p id="wheel">
       <i class="fa fa-spinner w3-spin" style="font-size:64px"></i>
   </p>
</div>

Please help.

Answer 1

insertRow is a property of tables.

You are trying to call it on a paragraph.

If you want to add data to an arbitrary element, use appendChild.

Answer 2

The HTMLTableElement.insertRow() method inserts a new row in the table and returns a reference to the new row.

Then insertRow() function should be called on HTMLTableElement, but the elment with the id wheel in your sample is a paragraph p and not a table.