C#•15mo 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

wwwwOP•15mo 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•15mo ago

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

wwwwOP•15mo ago

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

Kouhai•15mo ago

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

wwwwOP•15mo ago

ok, which is easyest then?

Angius•15mo 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