Maison >interface Web >tutoriel HTML >Explication de la différence entre l'emplacement des Js placés dans le fichier HTML
Explication de la différence entre l'emplacement des Js placés dans le fichier HTML
- 高洛峰original
- 2017-03-14 18:11:291618parcourir
Cette question a toujours été déroutante pour les débutants. Comprenez d'abord où js peut être placé en HTML, qui sont head et body. La plupart des gens se le mettent dans la tête. Quand je l’apprenais, je l’ai suivi confusément et je l’ai mis dans la tête, je ne sais pas pourquoi ? Aujourd'hui, parlons de la différence entre ces deux endroits :
Regardons d'abord un bout de code html :
<html> <head> <title> New Document </title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script type="text/javascript" src="test.js"></script> </head> <body> <div id="target"> </div> <button id="btn">按钮</button> </body> </html>
var test = function(){
var span = document.createElement("span");
span.innerHTML="添加";
document.getElementById("target").appendChild(span);
}
document.getElementById("btn").onclick=test;Si ce code est placé dans la tête, il ne s'exécutera pas . Pourquoi?
Il s'agit de l'ordre d'exécution du HTML Pour être plus précis, il ne s'agit pas de l'ordre d'exécution du HTML, mais de l'ordre d'exécution de js. Lorsque HTML est exécuté d'en haut vers , il entre dans le fichier test.js. La précédente ne sera pas exécutée, c'est-à-dire que celle encapsulée par la fonction ne sera pas exécutée à ce moment-là. Accédez à la page et récupérez l'élément dont l'ID d'élément est btn. Mais pour le moment, la page HTML n'a pas été chargée. Il n'est certainement pas possible d'obtenir l'élément avec l'identifiant btn. Une erreur sera signalée. À ce moment-là, quelqu'un a dit qu'il pourrait être modifié par le code suivant :
document.body.onload = function(){
document.getElementById("btn").onclick=test;
};Mais l'écrire de cette façon n'est pas aussi bon que de l'écrire devant
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!