Как реализовать вывод массива js в html

const arr = ['apple', 'banana', 'orange'];
const html = arr.map((item) => `<li>${item}</li>`).join('');
document.querySelector('ul').innerHTML = html;

<ul>
  <li>apple</li>
  <li>banana</li>
  <li>orange</li>
</ul>

<div class="basket">
    <div class="fruit"></div>
    <div class="fruit"></div>
    <div class="fruit"></div>
    <div class="fruit"></div>
    <div class="fruit"></div>
  </div>

const store = ['Apple', 'Mango', 'Peach', 'Orange', 'Lemon']
  document.querySelectorAll('.fruit').forEach((n, i) => n.textContent = store[i])

const fruitsAndVegetables = [
  ['Apple', 'Mango', 'Peach', 'Orange', 'Lemon'],
  ['Beets', 'Peas', 'Carrots']
]

const fruitsToTable = (array) => {
  const table = document.createElement('table');
  // Добавим видимые границы у таблицы
  table.setAttribute('border', '1');
    for (const row of array) {
      const tr = table.insertRow();
        for (const item of row) {
          const td = tr.insertCell();
          td.textContent = item
        }
    }
  return table;
}

document.body.append(fruitsToTable(fruitsAndVegetables));