var myArray = [1, 2, 3, 4, 5];
for (var i = 0; i < myArray.length; i++) {
document.write(myArray[i] + " ");
}

В результате выполнения данного кода на странице будет выведено 1 2 3 4 5.

Второй способ - использование innerHTML. Вместо использования document.write() мы можем напрямую изменять содержимое элемента HTML с помощью свойства innerHTML. Создадим элемент с определенным id, например, <div id="output"></div>, и с помощью JavaScript присвоим ему содержимое нашего массива:

var myArray = [1, 2, 3, 4, 5];
var outputElement = document.getElementById("output");
outputElement.innerHTML = myArray.join(" ");

В данном примере мы использовали метод join() для объединения элементов массива в строку, разделенную пробелом. Результат будет выглядеть идентично первому способу - 1 2 3 4 5.

Массивы являются одной из основных структур данных в JavaScript. Как мы можем вывести массив в HTML? Есть несколько способов сделать это.

Первый способ - использование цикла for. Мы можем пройти по каждому элементу массива и создать внутри цикла элемент <p> с содержимым каждого элемента:

<div id="output"></div>
// JavaScript код
const array = ["яблоко", "груша", "апельсин"];
for (let i = 0; i < array.length; i++) {
const element = array[i];
const p = document.createElement("p");
p.innerText = element;
document.getElementById("output").appendChild(p);
}

Второй способ — использование метода map. Метод map позволяет нам преобразовать каждый элемент массива в новое значение и создать новый массив. Мы можем использовать его, чтобы создать массив из элементов <p>:

<div id=»output»></div>
// JavaScript код
const array = [«яблоко», «груша», «апельсин»];
const pArray = array.map(element => {
const p = document.createElement(«p»);
p.innerText = element;
return p;
});
pArray.forEach(p => {
document.getElementById(«output»).appendChild(p);
});

Ниже приведен пример кода, который демонстрирует, как вывести элементы массива внутри элемента списка (

):




Массив элементов:

В данном примере создается массив array, содержащий три элемента. Функция displayArray() получает элемент списка (

) по его идентификатору, а затем в цикле перебирает элементы массива и создает элементы списка (
• ) с текстом каждого элемента массива. Затем созданные элементы добавляются внутрь элемента списка, используя свойство innerHTML.

  const fruits = ["яблоко", "банан", "апельсин", "груша"];

  Затем создадим таблицу в HTML и определим заголовки столбцов:

  <table>
  <tr>
  <th>Фрукт</th>
  </tr>

  Теперь мы можем использовать цикл for для прохода по каждому элементу массива и добавления их в таблицу:

  for (let i = 0; i < fruits.length; i++) {
  let row = `<tr><td>${fruits[i]}</td></tr>`;
  document.querySelector("table").innerHTML += row;
  }

  Здесь мы используем шаблонную строку, чтобы создать HTML-код для каждой строки таблицы с помощью текущего элемента массива. Затем мы добавляем этот HTML-код в таблицу с помощью свойства innerHTML.

  Полный код будет выглядеть следующим образом:

  <table>
  <tr>
  <th>Фрукт</th>
  </tr>
  <tr>
  <td>яблоко</td>
  </tr>
  <tr>
  <td>банан</td>
  </tr>
  <tr>
  <td>апельсин</td>
  </tr>
  <tr>
  <td>груша</td>
  </tr>
  </table>

  Теперь мы получаем таблицу, содержащую каждый элемент массива в отдельной строке:

  Фрукт
  яблоко
  банан
  апельсин
  груша

  Метод join() позволяет объединить все элементы массива в одну строку с использованием указанного разделителя.

  Синтаксис метода join() выглядит следующим образом:

  массив.join(разделитель)

  Разделитель — это строка, которая будет использоваться в качестве разделителя между элементами массива.

  Пример использования метода join():

  var fruits = ["яблоко", "банан", "груша"];
var fruitsString = fruits.join(", ");
alert(fruitsString);

  В данном примере у нас есть массив fruits, содержащий три элемента. Мы хотим вывести этот массив в виде строки, используя запятую и пробел в качестве разделителя.

  Метод join() применяется к массиву fruits c указанием запятой и пробела в качестве разделителя. Результатом будет строка «яблоко, банан, груша».

  В этом примере мы рассмотрим, как вывести двумерный массив в виде таблицы HTML. Для этого мы будем использовать циклы в JavaScript и создавать элементы таблицы в HTML.

  Предположим, у нас есть двумерный массив с данными о студентах:

  
  var students = [
  ['Иван', 'Иванов', 20],
  ['Алексей', 'Петров', 21],
  ['Мария', 'Сидорова', 19]
  ];
  

  Чтобы вывести этот массив в виде таблицы HTML, мы можем создать элементы таблицы (теги <table>, <tr> и <td>) с помощью JavaScript и заполнить их значениями из массива:

  
  // Создаем таблицу
  var table = document.createElement('table');
  // Проходимся по каждому элементу массива
  for (var i = 0; i < students.length; i++) {
  // Создаем строку таблицы
  var row = document.createElement('tr');
  // Проходимся по каждому элементу подмассива
  for (var j = 0; j < students[i].length; j++) {
  // Создаем ячейку таблицы
  var cell = document.createElement('td');
  // Заполняем ячейку значением из массива
  cell.textContent = students[i][j];
  // Добавляем ячейку в строку
  row.appendChild(cell);
  }
  // Добавляем строку в таблицу
  table.appendChild(row);
  }
  // Добавляем таблицу на страницу
  document.body.appendChild(table);
  

  В результате выполнения кода наш двумерный массив будет выведен в виде таблицы HTML:

  Иван	Иванов	20
  Алексей	Петров	21
  Мария	Сидорова	19