JavaScript 在 HTML 页面中渲染列表的详细指南

如何在 HTML 页面中使用 JS 显示列表

简介

在 Web 开发中，我们经常需要在页面上显示数据列表。JavaScript 提供了一种简单而强大的方法来实现这一点。本文将指导你如何使用 JS 将列表渲染到 HTML 页面中，并提供一个完整的示例。

第一步：从 JS 文件导出列表

创建一个包含你想要显示列表的 JS 文件。在这个文件中，将列表导出为一个常量。

// list.js
export const arr = [
  'Item 1',
  'Item 2',
  'Item 3',
];

第二步：在 HTML 文件中导入列表

在你的 HTML 文件中，导入包含列表的 JS 文件。

<script src="list.js"></script>

第三步：将列表渲染到 HTML

在 HTML 文件中，使用 JavaScript 将列表转换为 HTML 并将其追加到 <ul> 元素中。

// dragANDdrop.js
const html = arr.map((item) => `<li>${item}</li>`).join('');
document.querySelector('ul').innerHTML = html;

完整示例

以下是完整的示例：

list.js

export const arr = [
  'Item 1',
  'Item 2',
  'Item 3',
];

dragANDdrop.js

import { arr } from "./list.js";

const html = arr.map((item) => `<li>${item}</li>`).join('');
document.querySelector('ul').innerHTML = html;

index.html

<ul></ul>

<script src="list.js"></script>
<script src="dragANDdrop.js"></script>

结论

使用 JS 在 HTML 页面中显示列表是一种简单而有效的方法。本文提供了分步指南，并提供了一个完整的示例。通过遵循这些步骤，你可以轻松地将列表数据动态地添加到你的页面中。

常见问题解答

1. 如何将列表元素添加到 JavaScript 数组？

你可以使用 push() 方法将元素添加到数组中。

arr.push('New Item');

2. 如何从 HTML 文件中引用外部 JavaScript 文件？

使用 <script> 标签，并在 src 属性中指定文件路径。

<script src="external.js"></script>

3. 如何在 JavaScript 中选择 HTML 元素？

使用 document.querySelector() 或 document.querySelectorAll() 方法。

document.querySelector('ul');

4. 如何将 HTML 字符串插入到 DOM 中？

使用 innerHTML 属性。

document.querySelector('ul').innerHTML = html;

5. 如何将数组转换为 HTML 字符串？

使用 map() 和 join() 方法。

const html = arr.map((item) => `<li>${item}</li>`).join('');