如何使用JavaScript动态生成0到100的option选项？

现有代码存在的问题 #

• <section> 标签不支持 onload 事件，该事件仅可用于 <body>、<img>、<script> 等与外部资源加载相关的标签，无法触发你定义的options函数
• 原代码onload属性值仅写了options没有加执行括号，就算事件支持也不会运行函数，正确写法是options()
• 循环内直接用=给innerHTML赋值，每次都会覆盖之前写入的内容，最终只会保留最后一个<option>，应该用+=追加内容
• <option>的value属性写死为字符串"i"，没有正确读取变量i的实际值
• 循环条件i < 100只能生成0到99的选项，要生成到100需要改为i <= 100

修正后可用的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <section id="section">
    </section>
    <script>
        // 监听DOM加载完成自动执行，无需额外绑定事件
        document.addEventListener('DOMContentLoaded', function() {
            const section = document.getElementById("section");
            for(let i = 0; i <= 100; i++){
                section.innerHTML += `<option value="${i}">${i}</option>`;
            }
        })
    </script>
</body>
</html>

性能优化方案 #

如果要避免频繁操作DOM影响渲染效率，可以先把所有option拼接成完整字符串再一次性写入：

document.addEventListener('DOMContentLoaded', function() {
    const section = document.getElementById("section");
    let optionsHtml = '';
    for(let i = 0; i <= 100; i++){
        optionsHtml += `<option value="${i}">${i}</option>`;
    }
    section.innerHTML = optionsHtml;
})

内容的提问来源于stack exchange，提问作者itmemilan