关于script在head内报错，在body内可以执行的原因

原创已于 2022-03-19 20:26:53 修改 · 1.8k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

web前端

当前文章被收录于：

web前端

13 篇文章 1 人学习

html、css、js

订阅专栏查看详情

笔记

当前文章被收录于：

笔记

12 篇文章 1 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

于 2022-03-13 20:47:30 首次发布

本文探讨了JavaScript在HTML页面中的执行问题，重点在于解释为什么将script标签放在head中可能导致代码无法执行。原因在于DOM元素尚未生成，浏览器在遇到空的js标签后停止body的解析。解决方法是将script标签置于body底部，或者利用async或defer属性。示例代码展示了如何在页面加载后正确生成并填充九九乘法表。

script代码在head内无法执行，会报错的原因是你的DOM元素还未生成，当浏览器下载完js时发现为空就不会再向下执行body，而html页面是在执行了body之后才会显示。

javascript本身就是单线程的，在没有使用两个属性（async和defer）的情况下，只要吧script代码块放到body下面就可以正常执行。

参考下面的代码


<html lang="en">

<head>
    <title>九九乘法表</title>
    <style>
        table {
            border-collapse: collapse;
        }    
        table td {
            border: 1px solid #ccc;
            padding: 3px 6px;
        }
    </style>
</head>
<body>
    <table id="abc">
    </table>
    <script>
        var table = "";
        for (let i = 0; i < 9; i++) {
            var line = "<tr>";
            for (let j = 0; j < i + 1; j++) {
                line += "<td>" + (j + 1) + "*" + (i + 1) + "=" + ((j + 1) * (i + 1)) + "</td>";
            }
            line += "</tr>";
            table += line;
        }
        document.getElementById("abc").innerHTML = table;
    </script>
</body>
</html>

代码执行之后正确输出九九乘法表
在这里插入图片描述