Добавление массива Javascript в нумерованный список

Question

У меня есть предопределенный список массивов, который мне нужно отформатировать в нумерованный список в HTML.Я очень плохо знаком с HTML с Javascript и мне трудно работать с DOM

вот мой код JS var fruits = ['Apples', 'Oranges', 'Pears', 'Grapes', 'Pineapples', 'Mangos'];

вот мой HTML

<div id="fruits">



        </div>

            <h3>Fruits</h3>

`

это очень голые кости, и это просто потому, что я понятия не имею, с чего начать.

Answer 1

используйте Array.map для генерации массива HTML-элементов и отображения его:

var fruits = ['Apples', 'Oranges', 'Pears', 'Grapes', 'Pineapples', 'Mangos'];

var elems = fruits.map(element => `<li>${element}</li>`);

document.querySelector('#fruitsList').innerHTML = elems.join('');

ul {
  list-style-type: decimal;
}

<ul id="fruitsList"></ul>

для отображения чисел либо используйте <ol> или <ul> с list-style-type: decimal;

Answer 2

Вы можете использовать DOM , как показано ниже.Этот код перебирает ваш массив и добавляет каждый элемент в упорядоченный список.

var fruits = ['Apples', 'Oranges', 'Pears', 'Grapes', 'Pineapples', 'Mangos'];
var listOfFruits = [];
var list = document.getElementById("list");


fruits.forEach(function(element) {
  listOfFruits.push("<li>" + element + "</li>");
});

list.innerHTML = listOfFruits.join('');

<ol id="list"></ol>

Или вы можете использовать jQuery , как показано ниже.Этот код перебирает ваш массив и добавляет <li> к вашему html.

var fruits = ['Apples', 'Oranges', 'Pears', 'Grapes', 'Pineapples', 'Mangos'];
var listOfFruits = [];


fruits.forEach(function(element) {
  listOfFruits.push("<li>" + element + "</li>");
});

$("#list").html(listOfFruits.join(''));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol id="list"></ol>