时间戳

首页 > 解决方案 > 如何在javascript中使用数组并在网页上打印出来

javascript - 如何在javascript中使用数组并在网页上打印出来

问题描述

我正在做我的任务，但我之前没有在 HTML 上使用过 javascript。

这是我的 HTML 文件（list.html）。

 <main>
      <section class="main center">
        <!-- Start your code here -->
        <h2>HTML Lists</h2>
        <div id="fruit">
          <body>
            <h2>Fruit</h2>
          </body>
        </div>
         
        <div id="directories">
          <body>
            <h2>Directories</h2>
          </body>
        </div>

        <!-- End your code here  -->
      </section>
    </main>

这是我的 javascript 文件（list.js）。

const fruits = ['Apples', 'Oranges', 'Pears', 'Grapes', 'Pineapples', 'Mangos'];
/* I wrote this part (var i = 0; i < 6; i ++)
console.log fruits(i);*/
const directory = [
  { type: 'file', name: 'file1.txt' },
  { type: 'file', name: 'file2.txt' },
  {
    type: 'directory',
    name: 'HTML Files',
    files: [
      { type: 'file', name: 'file1.html' },
      { type: 'file', name: 'file2.html' }
    ]
  },
  { type: 'file', name: 'file3.txt' },
  {
    type: 'directory',
    name: 'JavaScript Files',
    files: [
      { type: 'file', name: 'file1.js' },
      { type: 'file', name: 'file2.js' },
      { type: 'file', name: 'file3.js' }
    ]
  }
];

我必须打印出水果数组，但我不知道如何在网页上打印出来。我只能在开发工具上检查它。

标签： javascripthtml

解决方案

此代码将水果列表动态添加到您的 html 代码中。

const fruits = ["Apples", "Oranges", "Pears", "Grapes", "Pineapples", "Mangos"];


let liList = "";
fruits.forEach(item => {
    liList = liList + `<li>${item}</li>`;
});

document.querySelector("#insertFruits").innerHTML = liList;
<main>
  <section class="main center">
    <!-- Start your code here -->
    <h2>HTML Lists</h2>
    <div id="fruit">

      <body>
        <h2>Fruit</h2>
        <ul id="insertFruits">
        </ul>
      </body>
    </div>

    <div id="directories">

      <body>
        <h2>Directories</h2>
      </body>
    </div>

    <!-- End your code here  -->
  </section>
</main>

推荐阅读