BLACK FRIDAY

осталось 3 дня

Скидка 10% и подарок на выбор — при покупке одной программы
При покупке двух программ  — вторая со скидкой 50%

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

Ответы
Аватар пользователя Вячеслав Межуревский

Вывести массив из 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));
Добавьте ваш ответ

Рекомендуемые курсы

Алгоритмы сортировки
Структуры данных
Бинарный поиск
Жадные алгоритмы
10 часов
Посмотреть
шаблонизация
REST
мидлвары
тестирование
11 часов
Посмотреть
состояние
JSX
компоненты
производительность
26 часов
Посмотреть