C#•2y ago

✅ Dark side

Hi, sooooo. Im building some web APIs, but when it comes to rendering data in html from js, its a bit annoying, like creating and appending all of these things, etc. So, I need some HTML builder, but very simple. Ive heard something about Mustache.js, or maybe there is something more relevant in 2023? And definitely not something like react.

6 Replies

WaranaiOP•2y ago

like this -

const tr = document.createElement("tr");
tr.setAttribute("data-rowid", user.id);

const nameTd = document.createElement("td");
nameTd.append(user.name);
tr.append(nameTd);

const ageTd = document.createElement("td");
ageTd.append(user.age);
tr.append(ageTd);

const linksTd = document.createElement("td");

const editLink = document.createElement("button"); 
editLink.append("Edit");
editLink.addEventListener("click", async() => await getUser(user.id));
linksTd.append(editLink);

const removeLink = document.createElement("button"); 
removeLink.append("Delete");
removeLink.addEventListener("click", async () => await deleteUser(user.id));

linksTd.append(removeLink);
tr.appendChild(linksTd);

return tr;

const tr = document.createElement("tr");
tr.setAttribute("data-rowid", user.id);

const nameTd = document.createElement("td");
nameTd.append(user.name);
tr.append(nameTd);

const ageTd = document.createElement("td");
ageTd.append(user.age);
tr.append(ageTd);

const linksTd = document.createElement("td");

const editLink = document.createElement("button"); 
editLink.append("Edit");
editLink.addEventListener("click", async() => await getUser(user.id));
linksTd.append(editLink);

const removeLink = document.createElement("button"); 
removeLink.append("Delete");
removeLink.addEventListener("click", async () => await deleteUser(user.id));

linksTd.append(removeLink);
tr.appendChild(linksTd);

return tr;

Kouhai•2y ago

Nowadays you'd usually use frontend framworks like React,Vue,Svelte

WaranaiOP•2y ago

even if im not interested in front end in just need to build some super simple learning task?

Kouhai•2y ago

Well, it would be a pain in the ass to manually create the DOM in js without a frontend framework

WaranaiOP•2y ago

ok, which is easyest then?

Angius•2y ago

You can use LitHtml https://github.com/lit/lit/tree/main/packages/lit-html Or even the whole Lit framework

Gaming

Programming

✅ Dark side

Did you find this page helpful?