Heim >Web-Frontend >HTML-Tutorial >Erläuterung des Unterschieds zwischen der Position der in der HTML-Datei platzierten Js
Erläuterung des Unterschieds zwischen der Position der in der HTML-Datei platzierten Js
- 高洛峰Original
- 2017-03-14 18:11:291617Durchsuche
Diese Frage war für Anfänger schon immer verwirrend. Verstehen Sie zunächst, wo js in HTML platziert werden kann, nämlich head und body. Die meisten Leute setzen es in den Kopf. Als ich es lernte, folgte ich ihm verwirrt und setzte es mir in den Kopf, ich weiß nicht warum? Lassen Sie uns heute über den Unterschied zwischen diesen beiden Orten sprechen:
Sehen wir uns zunächst einen Teil des HTML-Codes an:
<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;Wenn dieser Code im Kopf platziert wird, wird er nicht ausgeführt . Warum?
Hier geht es um die laufende Reihenfolge von HTML. Genauer gesagt handelt es sich nicht um die laufende Reihenfolge von HTML, sondern um die laufende Reihenfolge von js. Wenn HTML von oben nach ausgeführt wird, wird es in die Datei test.js eingegeben. Der vorherige Satz wird nicht ausgeführt, dh der von der Funktion umschlossene Satz wird nicht ausgeführt. Zu diesem Zeitpunkt wird der letzte Satz ausgeführt. Gehen Sie zur Seite und rufen Sie das Element ab, dessen Element-ID btn ist. Zu diesem Zeitpunkt wurde die HTML-Seite jedoch noch nicht geladen. Es ist definitiv nicht möglich, das Element mit der ID btn abzurufen. Es wird ein Fehler gemeldet. Zu diesem Zeitpunkt sagte jemand, dass es in den folgenden Code geändert werden könnte:
document.body.onload = function(){
document.getElementById("btn").onclick=test;
};Aber es ist nicht so gut, es auf diese Weise zu schreiben, wie es vor
Das obige ist der detaillierte Inhalt vonErläuterung des Unterschieds zwischen der Position der in der HTML-Datei platzierten Js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!