ホームページ > 記事 > ウェブフロントエンド > HTMLファイル内に配置されるJsの場所の違いを解説
HTMLファイル内に配置されるJsの場所の違いを解説
- 高洛峰オリジナル
- 2017-03-14 18:11:291531ブラウズ
この質問は初心者にとって常に混乱を招きます。まず、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 までご連絡ください。