ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLファイル内に配置されるJsの場所の違いを解説
この質問は初心者にとって常に混乱を招きます。まず、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 サイトの他の関連記事を参照してください。