html for循环

作者：苏染瞳° 发布日期:2025-08-13 浏览:69

<!DOCTYPE html>
<html>
<head>
    <title>HTML for 循环示例</title>
</head>
<body>
    <h1>使用 JavaScript 的 for 循环在 HTML 中生成列表</h1>
    <ul id="numberList"></ul>

    <script>
        // 获取 ul 元素
        var list = document.getElementById("numberList");

        // 使用 for 循环生成 5 个列表项
        for (var i = 1; i <= 5; i++) {
            // 创建一个新的 li 元素
            var listItem = document.createElement("li");

            // 设置 li 元素的文本内容
            listItem.textContent = "Item " + i;

            // 将 li 元素添加到 ul 中
            list.appendChild(listItem);
        }
    </script>
</body>
</html>

解释说明：

HTML 结构：我们创建了一个包含 ul 元素的 HTML 页面，用于存放生成的列表项。
JavaScript 代码：
- 使用 for 循环来生成 5 个列表项 (li)。
- 每次循环中，创建一个新的 li 元素，并设置其文本内容为 "Item X"（其中 X 是当前循环的索引）。
- 最后将生成的 li 元素添加到 ul 元素中。

这样，页面加载时会动态生成一个包含 5 个列表项的无序列表。

上一篇：图片居中怎么设置html

下一篇：html播放器