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

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Looking for method like ParentNode.append but replaces the contents of the ParentNode rather than adding to it without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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>
We are here to answer your question about Looking for method like ParentNode.append but replaces the contents of the ParentNode rather than adding to it - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji