Как добавить уникальный класс в динамически созданные элементы с помощью document.createElement

Question

У меня есть текст ответа JSON, выводимый в таблицу. Таблица создается динамически.

Как изменить код, чтобы каждому генерируемому элементу th и td было присвоено уникальное имя класса? Имена классов не должны меняться при перезагрузке скрипта. th х 5 и td х 5

  function loadAnalysis() {
    var xhttp = new XMLHttpRequest();
    var url = document.getElementById("url").value;
    if (url == "") {
      alert("Please enter URL");
      return;
    }
    xhttp.onreadystatechange = function() {
      if (this.readyState === 4 && this.status === 200) {
        var data = this.responseText;
        var jsonResponse = JSON.parse(data);
        console.log(jsonResponse["lighthouseResult"]);
        var table = document.createElement('table');
        table.setAttribute('class', 'result');
        var properties = ['performance', 'accessibility', 'best-practices', 'seo', 'pwa'];
        var capitalize = function(s) {
          return s.charAt(0).toUpperCase() + s.slice(1);
        }
        var tr = document.createElement('tr');
        for (var i = 0; i < properties.length; i++) {
          var th = document.createElement('th');
          th.appendChild(document.createTextNode(capitalize(properties[i])));
          tr.appendChild(th);
        }
        table.appendChild(tr);
        var tr, row;
        console.log("jsonResponse", jsonResponse);
        var categories = Object.keys(jsonResponse["lighthouseResult"]);
        for (var r = 0; r < categories.length; r++) {
          tr = document.createElement('tr');
          row = jsonResponse["lighthouseResult"][categories[r]];
          for (var i = 0; i < properties.length; i++) {
            var td = document.createElement('td');
            td.appendChild(document.createTextNode(row[properties[i]].score));
            tr.appendChild(td);
          }
          table.appendChild(tr);
        }
        document.getElementById('analysisTable').appendChild(table);
      }
    };
    xhttp.open("GET", "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=" + encodeURIComponent(url) +
      "&fields=lighthouseResult%2Fcategories%2F*%2Fscore&prettyPrint=false&strategy=desktop&category=performance&category=pwa&category=best-practices&category=accessibility&category=seo&key=AIzaSyDSNxhf0capOwppqlg9wZJUvzBewxf6mHU", true);
    xhttp.send();
  }

Answer 1

Возможно, не самый чистый способ кодирования, но он помог мне как javascript noob

Для th элементов:

th.classList.add("category");

Для td элементов:

        var ids = 'performance,accessibility,best-practices,seo,pwa'.split(',');
        for (var i = 0; i < properties.length; i++) {
        var td = document.createElement('td');
          td.id = ids[i];