在引用JS外部文件时，发现了一个问题。
教程中引用JS文件的大多写在HTML<head>标签中，但先引入JS文件可能造成的情况是，如果是针对<body>中的特定元素做修改的话，那么是无法实现的。
例如：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>galo's page</title>
<script>
document.getElementById("p1").innerHTML=("replace by js");
</script>
</head>
<body>
<p id="p1">this is written by HTML</p>
</body>
</html>但是如果JS代码是在p标签下引入，则可实现。
请问，如果要从外部引入JS文件，针对一些HTML元素进行调整，是根据什么原则在何处引入JS文件呢？
写在上面时如果是需要操作页面元素的js代码，要放在页面加载完成函数里，如：
$(document).ready(function(){
document.getElementById("p1").innerHTML=("replace by js");
});
本人是习惯写在上面或引入外部js文件，页面比较整洁。