打字稿错误“ HTMLElement”类型不存在属性。 任何

Question

I am trying to create a table using javascript inside typescript but I am getting error:

[ts] Property 'insertRow' does not exist on type 'HTMLInputElement'.
any

My code which is generating a table is like this:

  createTable(chart){
  var table = document.createElement("TABLE");    
  var row,header,cell1, cell2;
  var data = chart.options.data;

  table.style.border = "1px solid #000"; 
  header = table.createTHead();
  row = header.insertRow(0);    
  cell1 = row.insertCell(0);
  cell2 = row.insertCell(1);
  cell1.style.border = "1px solid #000"; 
  cell2.style.border = "1px solid #000"; 
  cell1.innerHTML = "<b>X-Value</b>"; 
  cell2.innerHTML = "<b>Y-Value</b>"; 

  for(var i = 0; i < data.length; i++){
    for(var j = 0; j< data[i].dataPoints.length; j++){
      row = table.insertRow(1);

      cell1 = row.insertCell(0);
      cell2 = row.insertCell(1);
      cell1.style.border = "1px solid #000"; 
      cell2.style.border = "1px solid #000"; 

      cell1.innerHTML = data[i].dataPoints[j].x;
      cell2.innerHTML = data[i].dataPoints[j].y; 
    }
  }    
  document.getElementById("chartContainer").appendChild(table);
}

I am getting errors for two properties createTHead() and insertRow() I followed few answers in stackoverflow I used this:

(document.createElement("TABLE")) as HTMLInputElement;

(table.createTHead()) as HTMLBodyElement;
(table.createTHead()) as HTMLInputElement;

I tried these following things I don't know why I am getting this error:

Answer 1

Answer to my solution was very simple I need to assign what type of element my table is. So answer to my problem is:

  createTable(chart){
  var table = document.createElement("TABLE")  as HTMLTableElement;    
  var row,header,cell1, cell2;
  var data = chart.options.data;
  table.style.border = "1px solid #000"; 
  header = table.createTHead();
  row = header.insertRow(0);    
  cell1 = row.insertCell(0);
  cell2 = row.insertCell(1);
  cell1.style.border = "1px solid #000"; 
  cell2.style.border = "1px solid #000"; 
  cell1.innerHTML = "<b>X-Value</b>"; 
  cell2.innerHTML = "<b>Y-Value</b>"; 

  for(var i = 0; i < data.length; i++){
    for(var j = 0; j< data[i].dataPoints.length; j++){
      row = table.insertRow(1);
      cell1 = row.insertCell(0);
      cell2 = row.insertCell(1);
      cell1.style.border = "1px solid #000"; 
      cell2.style.border = "1px solid #000"; 

      cell1.innerHTML = data[i].dataPoints[j].x;
      cell2.innerHTML = data[i].dataPoints[j].y; 
    }
  }    
  document.getElementById("chartContainer").appendChild(table);
 }

So I added HTMLTableElement and this was the solution to my problem.