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

Lanhe593

已于 2022-03-19 20:26:53 修改

阅读量1.6k

点赞数

分类专栏：笔记 web前端文章标签： javascript 前端 css

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

本文链接：https://blog.csdn.net/lanheit/article/details/123465643

版权

web前端同时被 2 个专栏收录

13 篇文章 1 订阅

订阅专栏

笔记

12 篇文章 1 订阅

订阅专栏

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>

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

Lanhe593

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
关于script在head内报错，在body内可以执行的原因

script代码在head内无法执行，会报错的原因是你的DOM元素还未生成，当浏览器下载完js是发现为空就不会再向下执行body，而html页面是在执行了body之后才会显示。javascript本身就是单线程的，在没有使用两个属性（async和defer）的情况下，只要吧script代码块放到body下面，也就是的前面就可以正常执行。参考下面的代码<html lang="en"><head> <title>九九乘法表</title>
复制链接

扫一扫