寻找类似 ParentNode.append 的方法，但替换 ParentNode 的内容而不是添加到它

Question

正如标题所说，我正在尝试用我生成的 table 替换（一个？）HTML 元素的内容。

当前，当单击该按钮时，它会将生成的 table 添加到 div tableDiv 的内容中。我想用它替换 tableDiv 的内容。我看了一下 replaceChild 但你需要知道旧的 child 它抛出了一个错误，即 children 的列表与 child 的列表不同当我尝试使用 childNodes 来找到当前的 children 来替换（这也是一种非常笨拙的方法）。

我也试过 document.getElementById("tableDiv").innerHTML 但 TypeScript 抛出了一个关于 innerHTML 只接受字符串而不是 HTML 元素的错误。（实际喜欢的代码是 div.innerHTML = table）

代码如下。如果有任何改变，我使用的 TypeScript 不是普通的 JavaScript。抱歉，你不能运行我在网上找不到任何支持 DOM 编辑的地方。

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 1

您可以先使用div.textContent = "";删除div变量中的所有元素。然后你可以在 div 中附加 table。试试下面的代码。

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>

Answer 2

此处：我重新添加了按钮，这样您就可以多次生成网格。

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 +1));
      var id = document.createAttribute("id");
      id.value = "" + (size * i + j + 1);
      cell.setAttributeNode(id);
    }
  }
    div.innerHTML = "<button type=\"button\" id=\"button\">Generate the grid</button>";  document.getElementById("button").addEventListener("click", () => {
      genGrid(100);
  });
  
  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>

Answer 3

有一种（鲜为人知的？）ParentNode.replaceChildren() 方法可以做到这一点。

function genGrid(size) {
  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();
      cell.append("" + (size * i + j));
      var id = document.createAttribute("id");
      id.value = "" + (size * i + j);
      cell.setAttributeNode(id);
    }
  }
  div.replaceChildren(table);
  div.append("test");
}

document.querySelector("input").addEventListener("input", (evt) => genGrid(evt.target.value) );
genGrid(8);

<div class="container">
  <div id="slideBar">
    <input type="range" min="1" max="20" value="8">
  </div>
  <div id="tableDiv">
  </div>
</div>

不过请注意，对于 InternetExplorer 等较旧的浏览器，您可能需要 polyfill。

寻找类似 ParentNode.append 的方法，但替换 ParentNode 的内容而不是添加到它

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

html

javascript

dom

html-table