Question

我有一个预定义的数组列表，需要将其格式化为HTML中的编号列表。我对使用javascript的HTML很陌生，并且在使用dom操作方面遇到了困难

这是我的js代码var fruits = ['Apples', 'Oranges', 'Pears', 'Grapes', 'Pineapples', 'Mangos'];

这是我的html

<div id="fruits">



        </div>

            <h3>Fruits</h3>

`

它的骨头很裸露，那仅仅是因为我不知道从哪里开始。

Answer 1

您可以使用 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>

Answer 2

使用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;

将Javascript数组添加到编号列表

2 个答案: