在编写html文档时，javascript可以放置的位置有两个地方<head>或者<body>,但是放置的地方，会对 JavaScript 代码的正常执行会有一定影响。由于 HTML 文档是由浏览器从上到下依次载入的，javascript的放置位置主要影响获取网页元素。如果你的代码中包含获取网页元素的代码例如document.getElementById()，那么你需要确保你的javascript代码要在你想要获取的元素的位置之后。如过在你想要获取的元素的位置之前调用这个些代码，由于网页还没加载，造成你无法获取那个元素，下面用例子说明：
例如：
<html> <head> <meta http-equiv="content-type", content="html/text; charset=UTF-8"> <title>测试</title> <script > document.getElementById("ceshi").onclick=function(){ document.getElementById("text").innerHTML="海阔凭鱼跃，天高任鸟飞"; }</script> </head><body> <p id="text">提示</p> <button id="ceshi" >测试</button></body></html> 这时候程序是错误的，因为javascript代码加载在前，所以document.getElementById("ceshi") 会出现错误。因为此时页面还没加载，找不到这个元素。
放在<body>中，但是在想要获取的元素之前，程序也是错误的
<html> <head> <meta http-equiv="content-type", content="html/text; charset=UTF-8"> <title>测试</title></head><body> <script > document.getElementById("ceshi").onclick=function(){ document.getElementById("text").innerHTML="海阔凭鱼跃，天高任鸟飞"; } </script> <p id="text">提示</p> <button id="ceshi" >测试</button></body></html> 放在<p>元素之后，程序正确
<html> <head> <meta http-equiv="content-type", content="html/text; charset=UTF-8"> <title>测试</title></head><body> <p id="text">提示</p> <button id="ceshi" >测试</button> <script > document.getElementById("ceshi").onclick=function(){ document.getElementById("text").innerHTML="海阔凭鱼跃，天高任鸟飞"; } </script></body></html> 但是如果用jQuery或者是通过定义函数的形式可以不用考虑javascript代码的放置位置。比如
html> <head> <meta http-equiv="content-type", content="html/text; charset=UTF-8"> <title>测试</title> <script> function abc(){ document.getElementById("text").innerHTML="海阔凭鱼跃，天高任鸟飞"; } </script> </head><body> <p id="text">提示</p> <button id="ceshi" onclick="abc()" >测试</button></body></html>
<html> <head> <meta http-equiv="content-type", content="html/text; charset=UTF-8"> <title>测试</title> <script src='/images/loading.gif' data-original="jquery-1.12.4.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#text").html("海阔凭鱼跃，天高任鸟飞"); });}); </script> </head><body> <p id="text">提示</p> <button id="ceshi" onclick="abc()" >测试</button></body></html>
原标题：javascript代码放置位置对程序的影响
关键词：JavaScript
我知道了 