Yes, use Fetch API to retrieve the resources, and pass the resulting data to a function that uses the DOM APIs to create the table element + children. If you're not attaching event handlers to the elements, and if the data is properly sanitized, you can also use a combination of `innerHTML` + HTML written in template strings to dynamically create the markup.
Often people will see this and say "that doesn't scale!" Well, yeah, unless you start writing optimizations, at which point, you maybe created your own framework or view library and maybe you should start looking at something like Preact or Mithril.
Thanks, that's really helpful to me. In particular, I wanted to know whether creating a table dynamically from Ajax data was sufficient reason to start using Preact/Mithril, and you made it clear that in your opinion it's not.
Because if you wanted to make changes to the table, and your rendering mechanism is rewriting to innerHTML, it's going to nuke all the elements and create new ones (even those that don't need to be recreated).
On the other hand, DOM APIs can get expensive quickly especially if you're calling `document.createElement` repeatedly to create maybe 1000s of table rows.
So then you have to find ways to minimize the amount of DOM operations that must happen. Or like the rest of us, just pick up a JS library that already solved this problem.
Don't know if this is directly related but the last time I fetched 9,000 elements to a select list, my browser went HRNGHHHH (on an M1 Macbook Pro). (No, 9,000 elements in a select list was not intentional.)
Often people will see this and say "that doesn't scale!" Well, yeah, unless you start writing optimizations, at which point, you maybe created your own framework or view library and maybe you should start looking at something like Preact or Mithril.