Adding a Javascript Array To a Numbered List

Question

I have a predefined array list that I need to be formatted into a numbered list in HTML. I'm very new to html with javascript and am having a hard time with dom manipulation

here is my js code var fruits = ['Apples', 'Oranges', 'Pears', 'Grapes', 'Pineapples', 'Mangos'];

here is my html

<div id="fruits">



        </div>

            <h3>Fruits</h3>

`

its very bare bones and that's simply because I have no idea where to start.

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

use Array.map to generate an array of html elements and display it :

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>

to display the numbers either use <ol> or <ul> with list-style-type: decimal;

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 23, 2019 at 1:33

Taki

17.7k5 gold badges28 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aniket G · Accepted Answer · 2019-02-23 01:54:36Z

You can use DOM like below. This code loops through your array, and adds each element to an ordered list.

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>

Or you can use jQuery like below. This code loops through your array and appends a <li> to your 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>

Collectives™ on Stack Overflow

Adding a Javascript Array To a Numbered List

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related