JS在HTML的中位置

最新推荐文章于 2022-04-06 22:05:37 发布

未来畅想--娜

最新推荐文章于 2022-04-06 22:05:37 发布

阅读量3.8k

点赞数 1

文章标签： javascrip

本文链接：https://blog.csdn.net/wangnayu/article/details/50072273

版权

本文探讨了JavaScript在HTML页面中的加载时机及其对页面渲染的影响。详细分析了将JS代码放置于head与body标签之间的区别，并介绍了如何利用window.onload事件确保DOM元素加载完成后再执行JS代码。

摘要由CSDN通过智能技术生成

由上一篇博客（初始JavaScript）已经知道JS是通过script标签在HTML页面中插入JavaScript。位置分别是head和body。
1、在head中插入JavaScript时，由于HTML文档是有浏览器从上到下依次载入的，所以在JavaScript被调用时就已经执行，此时页面还未加载。
2、在body中插入JavaScript时，页面在加载的时候会被执行。

放置与head标签之间

HTML代码

<html>
<head> 
<title> 实例 </title> 
<meta http-equiv="content-type" content="text/html;charset=utf-8"> 
<script type="text/javascript" src="demo2.js"></script> 
</head> 

<body> 
<div id="target"> 
</div> 
<button id="btn">按钮</button> 
</body> 
</html>

demo2.js

var test = function(){ 
var span = document.createElement("span"); 
span.innerHTML="添加"; 
document.getElementById("target").appendChild(span); 
} 

document.getElementById("btn").onclick=test;

结果

没有运行。HTML从上往下运行到script标签时，进入demo2.js。进入demo2.js之后，先执行document.getElementById(“btn”).οnclick=test，但是这个时候页面没有加载完全，获取不到id为btn的元素。
这时可以用window.onload事件来加载HTML，例如：

window.onload=function(){
    //这里存放当网页所有内容都加载完毕后，再执行的代码
    var test = function(){ 
        var span = document.createElement("span"); 
        span.innerHTML="添加"; 
        document.getElementById("target").appendChild(span); 
        }
    document.getElementById("btn").onclick=test; 
}

运行结果

这里写图片描述

放置与body标签之间

<html> 
<head> 
<title> 实例 </title> 
<meta http-equiv="content-type" content="text/html;charset=utf-8"> 
</head> 

<body> 
<div id="target"> 
</div> 
<button id="btn">按钮</button> 
<script type="text/javascript" src="demo2.js"></script> 
</body> 
</html>

demo2.js

var test = function(){ 
    var span = document.createElement("span"); 
    span.innerHTML="添加"; 
    document.getElementById("target").appendChild(span); 
    }
document.getElementById("btn").onclick=test;