Looking for method like ParentNode.append but replaces the contents of the ParentNode rather than adding to it

As the title says I am trying to replace the contents of a (an?) HTML element with a table I have generated.

Currently when the button is clicked it adds the generated table to the contents of div tableDiv. I would like it to replace the contents of tableDiv. I had a look at replaceChild but you need to know the old child and it threw an error that a list of children wasn’t the same as a child when I tried to use childNodes to find the current children to replace (also that felt like a very janky way to do it).

I also tried document.getElementById("tableDiv").innerHTML but TypeScript threw an error about innerHTML only accepting strings not HTML elements. (actual like of code was div.innerHTML = table)

The code is below. I am using TypeScript not plain JavaScript if that changes anything. Sorry you can’t run it I couldn’t find anywhere online that supports DOM editing.

function genGrid(size) {
  console.log("genGrid called");
  var div = document.getElementById("tableDiv");
  var table = document.createElement("table");
  for (var i = 0; i < size; i++) {
    var row = table.insertRow();
    for (var j = 0; j < size; j++) {
      var cell = row.insertCell();
      //let cellText = document.createTextNode(`${size*i+j}`);
      cell.append("" + (size * i + j));
      var id = document.createAttribute("id");
      id.value = "" + (size * i + j);
      cell.setAttributeNode(id);
    }
  }
  div.append(table);
  console.log(table);
  div.append("test");
}
<!DOCTYPE html>
<html>

<head>
  <!--<script src="latticePaths.js"></script>
        <link rel="stylesheet" type="text/css"href="latticePaths.css" /> -->

</head>

<body>
  <div class="container">
    <div id="slideBar">
      <!--slider for size: (not yet implemented)-->
    </div>
    <div id="tableDiv">
      <button type="button" onClick="genGrid(6)">Generate the grid</button>
    </div>
  </div>
</body>

</html>

Answer

You can first delete all the elements inside the div variable using div.textContent = "";. Then you can append the table inside div. Just give it a try to the code below.

const genGrid = (size) => {
  console.log("genGrid called");
  var div = document.getElementById("tableDiv");
  var table = document.createElement("table");
  for (var i = 0; i < size; i++) {
    var row = table.insertRow();
    for (var j = 0; j < size; j++) {
      var cell = row.insertCell();
      //let cellText = document.createTextNode(`${size*i+j}`);
      cell.append("" + (size * i + j));
      var id = document.createAttribute("id");
      id.value = "" + (size * i + j);
      cell.setAttributeNode(id);
    }
  }
  div.textContent = "";
  div.append(table);
  console.log(table);
  div.append("test");
};

document.getElementById("button").addEventListener("click", () => {
    genGrid(6);
});
<div class="container">
  <div id="slideBar">
    <!--slider for size: (not yet implemented)-->
  </div>
  <div id="tableDiv">
    <button type="button" id="button">Generate the grid</button>
  </div>
</div>