I often use template literals for this, constructing a long string of HTML using the += operator and then using document.innerHTML to append the final HTML string to my page.

A simple example might look like this:

const helloWorlds = {
  spanish: '¡Hola Mundo!',
  polish: 'Witaj świecie!',
  french: 'Bonjour le monde!'
}

const helloWorldsKeys = Object.keys(helloWorlds);

let listMarkup = '';

for (let i = 0; i < helloWorldsKeys.length; i++) {
  listMarkup += '<li class="listItem">' + helloWorlds[helloWorldsKeys[i]] + '</li>';
}

const myList = document.getElementById("list");

myList.innerHTML = listMarkup;

<div>
  <h1>Hello World!</h1>
  <ul id="list"></ul>
</div>

Of course, you can also use appendChild to construct the list bit by bit in the client rather than adding the whole list at once. This might look like:

const myList = document.getElementById("list");

const helloWorlds = {
  spanish: '¡Hola Mundo!',
  polish: 'Witaj świecie!',
  french: 'Bonjour le monde!'
}

const helloWorldsKeys = Object.keys(helloWorlds);

for (let i = 0; i < helloWorldsKeys.length; i++) {
  let listItem = document.createElement('li');
  listItem.classList.add('listItem');
  listItem.innerHTML = helloWorlds[helloWorldsKeys[i]];
  myList.appendChild(listItem);
  
}

<div>
  <h1>Hello World!</h1>
  <ul id="list"></ul>
</div>

Here's an example using a table:

const myTableBody = document.getElementById("my-table-body");

const helloWorlds = {
  spanish: '¡Hola Mundo!',
  polish: 'Witaj świecie!',
  french: 'Bonjour le monde!'
}

const helloWorldsKeys = Object.keys(helloWorlds);

for (let i = 0; i < helloWorldsKeys.length; i++) {

  // create a table row element
  let tableRow = document.createElement('tr');

  // create a table cell (td) element
  let listItem = document.createElement('td');
  listItem.classList.add('listItem');

  // add content to table cell element
  listItem.innerHTML = helloWorlds[helloWorldsKeys[i]];

  // append table cell to table row
  tableRow.appendChild(listItem);

  // append table row to table body
  myTableBody.appendChild(tableRow);
}

<table border="1">
  <thead>
    <td>Hello World!</td>
  </thead>
  <tbody id="my-table-body"></tbody>
</table>

Regarding your specific application, check out this answer if you want to explore creating HTML documents and appending their contents to other HTMl documents: Cannot append DOM element to DIV node: Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node'

DataTables lets you define the structure and data of the table programmatically using what they call "data sources".

There are a few examples in the documentation. I'm not sure which one will suit you but here are a few to get you started:

• DataTables dynamic creation example (uses a JS array)
• DataTables AJAX source example (uses a JS array through AJAX)

You could combine that with the bDestroy() method to avoid recreating the <table> tag.

A different approach would be to re-set the rows without recreating the table. There is no setData() method that I know of, but you could use the fnClearTable() and fnAddData() methods to achieve the same result. You can read more about these methods in the DataTables API docs.