基于JavaScript数组生成HTML按钮失败问题排查求助

嘿，我一眼就看到你代码里的核心问题了——你把onload事件绑定在了<div>元素上，但<div>标签根本不支持onload事件！这个事件只能绑定在<body>标签或者window对象上，所以你的printBtn()函数从头到尾都没被调用过，按钮自然不会被生成出来~

除此之外，还有两个小细节需要修正：

• <!DOCTYPE>的写法不完整，标准的HTML5声明应该是<!DOCTYPE html>，缺失的话浏览器可能会进入怪异模式，影响页面渲染行为。
• 你把脚本放在<head>里，虽然通过onload触发能避免DOM未加载的问题，但其实有更灵活的写法。

修正后的代码（方案一：绑定body的onload事件） #

<!DOCTYPE html>
<html>
<head>
    <script>
        var listBrand = ['LEXUS','AUDI','MAYBACK','FERRARI','TOYOTA'];
        
        function printBtn() {
            for (var i = 0; i < listBrand.length; i++) {
                var btn = document.createElement("button");
                var t = document.createTextNode(listBrand[i]);
                btn.appendChild(t);
                document.body.appendChild(btn);
            }
        }
    </script>
</head>
<body onload="printBtn();">
</body>
</html>

更推荐的写法（方案二：把脚本放在body末尾） #

把脚本放在<body>的最后，此时DOM已经完全加载完成，你可以直接调用函数，不需要依赖onload事件：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <script>
        var listBrand = ['LEXUS','AUDI','MAYBACK','FERRARI','TOYOTA'];
        
        function printBtn() {
            for (var i = 0; i < listBrand.length; i++) {
                var btn = document.createElement("button");
                var t = document.createTextNode(listBrand[i]);
                btn.appendChild(t);
                // 可以给按钮加个间距，看起来更美观
                btn.style.marginRight = "8px";
                document.body.appendChild(btn);
            }
        }
        
        printBtn(); // 直接调用函数即可
    </script>
</body>
</html>

总结一下问题根源 #

1. 错误地给<div>绑定onload事件：只有<body>、<img>等少数元素支持这个事件，<div>不在其中，导致函数未执行。
2. DOCTYPE声明不规范：虽然不是这次的直接原因，但规范的声明能避免很多潜在的渲染问题。

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