ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLファイル内に配置されるJsの場所の違いを解説

HTMLファイル内に配置されるJsの場所の違いを解説

高洛峰
高洛峰オリジナル
2017-03-14 18:11:291618ブラウズ

この質問は初心者にとって常に混乱を招きます。まず、HTML 内のどこに js を配置できるか、つまり head と body を理解します。ほとんどの人が頭の中に入れています。私はそれを学んでいるとき、混乱してそれを頭の中に入れてしまったのですが、なぜですか?今日は、これら 2 つの場所の違いについて話しましょう:
まず 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;

このコードが head に配置されている場合、コードは実行されません。なぜ?
これはHTMLの実行順序についてですが、正確にはHTMLの実行順序ではなく、jsの実行順序です。 HTML が上から まで実行されると、test.js ファイルに入ります。前の文、つまり関数でラップされたものは実行されません。この時点では、最後の文が実行されます。ページに移動し、要素 ID が btn である要素を取得します。ただし、この時点では HTML ページはロードされていません。 ID btn の要素を取得することは絶対に不可能です。エラーが報告されます。このとき、次のコードに変更できると誰かが言いました:

document.body.onload = function(){ 
document.getElementById("btn").onclick=test; 
};

しかし、このように書くのは、

以上がHTMLファイル内に配置されるJsの場所の違いを解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。