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

Вывод массива в HTML с помощью метода .map():

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

В данном примере мы создали массив arr, затем с помощью метода map создали новый массив, в котором каждый элемент обернут в тег <li>. Затем мы объединили элементы массива в строку с помощью метода join и передали полученный HTML в свойство innerHTML элемента ul на странице.

Пример вывода на страницу:

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

Вывести массив из js на страницу можно разными способами. Рассмотрим некоторые из них.

Пример №1 - У нас есть место на странице куда должны попасть данные.

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

Код ниже положит каждый фрукт в каждый div.

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

Пример №2 - Мы сами создаем структуру на странице в момент обхода массив элементов.

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