使用普通 JavaScript 渲染 html

Question

I am consuming an API on the client-side and then rendering the data, however, not sure if there is a better to render it . The way I have done (see below sample) it seem messy and unreadable. I can't use any framework. This is a nodejs application. I was initially using the ejs but since I am calling the API on the client-side it doesn't make sense to use ejs.

<script>
  let data;
  async function getData() {
    const response = await fetch(
      "/version/all/?format=json&page=11",
      {
        method: "GET",
        mode: "cors",
      }
    );
    let dataresponse = await response.json();
    renderData(dataresponse);
  }

  function renderData(data) {
    const div = document.getElementById("main");
    const table = document.createElement("table");
    table.setAttribute("class", "table");
    const tableBody = document.createElement("tbody");
    table.appendChild(tableBody);

    for (let i = 0; i < data.results.length; i++) {
      const th = document.createElement("th");
      th.setAttribute("scope", "row");
      const chkbox = document.createElement("input");
      chkbox.setAttribute("type", "checkbox");
        th.append(chkbox)
      const tr = document.createElement("tr");
      tr.appendChild(th);
      tableBody.appendChild(tr);
      const td = document.createElement("td");
      td.setAttribute("class", "w-40");
      const p1 = document.createElement("p");
      const a_url = document.createElement("a")
      a_url.setAttribute("href", data.results[i].url )
      a_url.textContent = `${data.results[i].version.split("-")[0]}`
      p1.appendChild(a_url) 
      td.appendChild(p1);
     

      const p2 = document.createElement("p");
      td.appendChild(p2);
      p2.appendChild(
        document.createTextNode(
          `${data.results[i].text.author.author}`
        )
      );

      const p3 = document.createElement("p");
      td.appendChild(p3);
      p3.appendChild(
        document.createTextNode(`${data.results[i].text.title}`)
      );

      const td2 = document.createElement("td");
      td2.setAttribute("class", "w-40");
      const p4 = document.createElement("p");
      td2.appendChild(p4);
      p4.appendChild(
        document.createTextNode(`${data.results[i].text.author.author}`)
      );

      const p5 = document.createElement("p");
      td2.appendChild(p5);
      p5.appendChild(
        document.createTextNode(
          `${data.results[i].text.title}`
        )
      );

     const td3 = document.createElement("td");
      td3.setAttribute("class", "w-10");
      const p6 = document.createElement("p");
      sp1 = document.createElement('span')
      sp1.setAttribute('class','bi bi-download')
      sp2 = document.createElement('span')
      sp2.setAttribute('class','bi bi-body-text')
      sp3 =document.createElement('span')
      sp3.setAttribute('class','bi bi-journal')
      sp4 = document.createElement('span')
      sp4.setAttribute('class','bi bi-bezier')
  
      p6.appendChild(sp1);
      p6.appendChild(sp2);
      p6.appendChild(sp3);
      p6.appendChild(sp4);
      td3.appendChild(p6);


      const td4 = document.createElement("td");
      td4.setAttribute("class", "w-10");

      tr.appendChild(td);
      tr.appendChild(td2);
      tr.appendChild(td3);
      tr.appendChild(td4);

      div.appendChild(table);
    }
  }
  getData();
</script>

Answer 1

It cannot be answered in a post. But, I like to give you an idea of one way to go about.

You could have something like this:

function getById(id) {}
function createElement(type, attributes) {}
function createParagraph(attributes, text) {
  const element = createElement('p', attributes);
  element.appendChild(document.createTextNode(text));
  return element;
}
function createLink(text, url, attributes) {
  const element = createElement('a', {...attributes, href: url});
  element.appendChild(document.createTextNode(text));
  return element;
}

I hope you get the idea.