使用普通JavaScript渲染HTML

Question

我正在客户端消耗API，然后呈现数据，但是，不确定是否有更好的渲染。我做的方式（请参见下面的示例）看起来很混乱且不可读。我不能使用任何框架。这是一个nodejs应用程序。我最初使用的是EJS，但是由于我在客户端上调用API，因此使用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

它不能在帖子中回答。但是，我喜欢给您一个方法，以了解一种方法。

您可以拥有这样的东西：

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;
}

希望您明白。