HTML中的foreach循环|极客教程

HTML中的foreach循环

在HTML中，我们经常需要遍历数组或对象，并将其中的元素展示在页面上。为了实现这一功能，我们可以使用JavaScript中的forEach方法。在本文中，我们将详细介绍如何在HTML中使用forEach循环来遍历数组和对象，并展示示例代码。

遍历数组

首先，让我们看看如何在HTML中使用forEach循环来遍历数组。假设我们有一个包含多个字符串的数组，我们想要将每个字符串展示在页面上。下面是一个简单的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>遍历数组示例</title>
</head>
<body>
    <ul id="list"></ul>

    <script>
        const array = ['Hello', 'World', 'geek-docs.com'];

        const list = document.getElementById('list');

        array.forEach(item => {
            const li = document.createElement('li');
            li.textContent = item;
            list.appendChild(li);
        });
    </script>
</body>
</html>

Output:

HTML中的foreach循环

在上面的示例中，我们首先定义了一个包含多个字符串的数组array，然后使用forEach方法遍历数组中的每个元素，并将其添加到页面上的一个无序列表中。运行该示例代码后，页面上将展示出数组中的每个字符串。

遍历对象

除了遍历数组，我们还可以使用forEach循环来遍历对象。假设我们有一个包含多个键值对的对象，我们想要将每个键值对展示在页面上。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>遍历对象示例</title>
</head>
<body>
    <ul id="list"></ul>

    <script>
        const obj = {
            name: 'Alice',
            age: 25,
            website: 'geek-docs.com'
        };

        const list = document.getElementById('list');

        Object.entries(obj).forEach(([key, value]) => {
            const li = document.createElement('li');
            li.textContent = ` ${key}:$ {value}`;
            list.appendChild(li);
        });
    </script>
</body>
</html>

Output:

HTML中的foreach循环