Looking for method like ParentNode.append but replaces the contents of the ParentNode rather than adding to it
Question
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>
3 answers
solution1
1
Here: I re-appended the button so you can generate the grid one more than once.
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>
solution2
0 ACCPTED 2021-04-04 20:41:55
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>
solution3
0 2021-04-05 09:10:40
There is a (little-known?) ParentNode.replaceChildren() method that does exactly that.
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>
Though beware, you may need a polyfill for older browsers like InternetExplorer.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.