How to format JavaScript generated HTML code?

I am trying to make a function which can generate tables from the data passed. The data is supposed to be in this format:

let tableContent = [
  [
    {
      type: "td",
      content: "Hello!",
    },
  ],
  [
    {
      type: "td",
      content: "Hello!",
    },
  ],
];

Here the entire array is one table, arrays inside it are rows, and objects inside them are data for each cell inside the row.

The problem is that when I use this function on this data:

function makeTable(tableArray) {
  //Entire Table
  let tableTemplate;
  let tableContent = "";

  //row level variables
  let rowTemplate;
  let rowContent = "";

  //cell level variables
  let cellType;
  let cellContent;
  let cellTemplate;

  //running function for each row
  tableArray.forEach((row) => {
    //running function for each cell
    row.forEach((cell) => {
      cellType = cell.type || "td";
      if (cellType !== "td" && cellType !== "th")
        return console.error(
          `Error: The type of a cell must be either "td" or "th" you passed "${cellType}"!`
        );
      cellContent = cell.content;
      cellTemplate = `<${cellType}>${cellContent}</${cellType}>`;
      rowContent += cellTemplate;
    });

    rowTemplate = `<tr>${rowContent}</tr>`;
    tableContent += rowTemplate;
    rowContent = ""
  });

  tableTemplate = `<table>${tableContent}</table>`;
  return tableTemplate;
}
//this function outputs:
//<table><tr><td>Hello!</td></tr><tr><td>Hello!</td></tr></table>
//if used on the above data

The table is formed on one single line. I want that the code generated is nicely indented and easily readable. I know that this is not important as the main functionality of the function is to generate tables not code. But still so that it is easier to understand the generated code, I want it to be readable. My question is how can apply indentations to the generated code?

Thanks for reading my query!

Answer

You can simply use t for tabs to indent (or a couple of spaces if you prefer) and rn for newlines.

Something like this for example:

function makeTable(tableArray) {
  //Entire Table
  let tableTemplate;
  let tableContent = "";

  //row level variables
  let rowTemplate;
  let rowContent = "";

  //cell level variables
  let cellType;
  let cellContent;
  let cellTemplate;

  //running function for each row
  tableArray.forEach((row) => {
    //running function for each cell
    row.forEach((cell) => {
      cellType = cell.type || "td";
      if (cellType !== "td" && cellType !== "th")
        return console.error(
          `Error: The type of a cell must be either "td" or "th" you passed "${cellType}"!`
        );
      cellContent = cell.content;
      cellTemplate = `tt<${cellType}>${cellContent}</${cellType}>rn`;
      rowContent += cellTemplate;
    });

    rowTemplate = `t<tr>rn${rowContent}t</tr>rn`;
    tableContent += rowTemplate;
    rowContent = ""
  });

  tableTemplate = `<table>rn${tableContent}</table>`;
  return tableTemplate;
}

let tableContent = [
  [
    {
      type: "td",
      content: "Hello!",
    },
  ],
  [
    {
      type: "td",
      content: "Hello!",
    },
  ],
];

console.log(makeTable(tableContent))