📌  相关文章
📜  在纯 javascript 中使用 for of 循环将数据填充到 HTML - Javascript (1)

📅  最后修改于: 2023-12-03 14:51:31.319000             🧑  作者: Mango

在纯 JavaScript 中使用 for of 循环将数据填充到 HTML

在纯 JavaScript 中使用 for of 循环可以很方便地遍历数组或类数组对象，我们可以利用这个特性将数据填充到 HTML 页面中。本文介绍如何使用 for of 循环来实现数据填充的功能。

准备工作

首先，我们需要一个 HTML 页面来展示数据。我们可以创建一个带有一个容器元素的 HTML 文件，例如：

<!DOCTYPE html>
<html>
<head>
  <title>数据填充示例</title>
</head>
<body>
  <div id="data-container"></div>

  <script src="main.js"></script>
</body>
</html>

在这里，我们创建了一个 div 元素用于容纳数据，我们将在 JavaScript 中填充该容器。

数据填充实现

在 JavaScript 文件 main.js 中，我们可以先准备一些要填充的数据，例如一个数组：

const data = ['苹果', '香蕉', '橙子', '葡萄'];

接下来，我们可以通过 for of 循环来遍历数据，并将每个项添加到 HTML 页面中的容器元素中：

const dataContainer = document.getElementById('data-container');

for (const item of data) {
  const listItem = document.createElement('li');
  listItem.innerText = item;
  dataContainer.appendChild(listItem);
}

在这里，我们首先通过 getElementById 方法获取到了 HTML 页面中的容器元素，然后使用 for of 循环遍历数据数组。在每次循环迭代中，我们通过 document.createElement 方法创建一个新的 li 元素，并将数据项作为文本内容赋值给该元素。最后，我们将创建的元素添加到容器元素中，以显示在 HTML 页面上。

运行示例

保存好 HTML 和 JavaScript 文件后，在浏览器中打开该 HTML 文件，即可看到数据已经成功填充到了 HTML 页面中。

总结

通过本文，我们学会了如何在纯 JavaScript 中使用 for of 循环来将数据填充到 HTML 页面中。我们首先准备了要填充的数据，然后利用 for of 循环遍历数据并将每个项添加到 HTML 元素中。这是一个非常常见的数据填充的处理方式，可以方便地将数据动态显示在页面上。

注意：本示例假设在浏览器环境中运行，并且只展示基础的用法。在实际开发中，可能需要处理更复杂的数据结构和使用更多的 DOM 操作。