寻找类似 ParentNode.append 但替换 ParentNode 的内容而不是添加到它的方法
Posted
技术标签:
【中文标题】寻找类似 ParentNode.append 但替换 ParentNode 的内容而不是添加到它的方法【英文标题】：Looking for method like ParentNode.append but replaces the contents of the ParentNode rather than adding to it 【发布时间】：2021-06-30 20:36:52 【问题描述】：正如标题所说，我正在尝试用我生成的表格替换 (an?) html 元素的内容。
当前，当单击按钮时，它会将生成的表格添加到 div tableDiv 的内容中。我希望它替换tableDiv 的内容。我查看了replaceChild，但您需要知道老孩子，当我尝试使用childNodes 查找要替换的当前孩子时，它抛出了一个错误，即孩子列表与孩子不同（这也是一种非常笨拙的方式）。
我也尝试过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>【问题讨论】：
【参考方案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>【讨论】：
使用 lambda 和事件有什么好处？ 好镜头，但要让它工作，你必须重新附加按钮或将其移到 div 之外 我使用了事件监听器，因为在 js 中使用 typescript 进行测试时，由于某种原因，按钮中的 onClick 事件会引发一些错误。而对于箭头功能，这只是我个人的喜好。【参考方案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>【讨论】：
【参考方案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。
【讨论】：
replaceChildren 方法给出错误'replaceChild 在 HTMLElement 类型上不存在' 那么只需扩展 Node 接口，使其保持最新状态。以上是关于寻找类似 ParentNode.append 但替换 ParentNode 的内容而不是添加到它的方法的主要内容，如果未能解决你的问题，请参考以下文章
寻找用于 Java 开发的类似 Cppcheck 的工具 [关闭]
为 PHP 的 `explode` 和 `implode` 函数寻找 JavaScript 类似物 [重复]