时间戳

首页 > 解决方案 > 将 Javascript 数组添加到编号列表

javascript - 将 Javascript 数组添加到编号列表

问题描述

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

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

这是我的html

<div id="fruits">



        </div>

            <h3>Fruits</h3>

`

它非常简单，这仅仅是因为我不知道从哪里开始。

标签： javascripthtml

解决方案

您可以使用如下所示的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 。此代码循环遍历您的数组并将 a 附加<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>

推荐阅读