今天在使用JavaScript使用document.ElementById("ID")的时候，发现var x = document.getElementById("childDiv")在方法外定义的全局变量不能使用，在方法内部定义却可以使用。具体代码如下：
<script type="text/javascript" charset="utf-8" async defer>
var x = document.getElementById("childDiv") /*无效的*/
function addButton(){
var e = document.createElement("input");
e.type="button";
e.value="被添加的按钮";
x.appendChild(e)
};
function addSelect(){
var e2 = document.createElement("select");
e2.options[0] = new Option("上海","");
e2.options[1] = new Option("北京","")
e2.size = "2";
x.appendChild(e2);
};
function addImg(){
var e3 = document.getElementById("img1")
x.appendChild(e3);
}
</script>
<div>
<img id="img1" src="img/view1.jpg" alt="星星" width="300" height="300">
<input type="button" value="添加按钮" onclick="addButton()">
<input type="button" value="添加选择框" onclick="addSelect()">
<input type="button" value="添加图像" onclick="addImg()">
<div id="childDiv"></div>
</div>
这个问题我纠结了好一会，在网上查取一些资料，翻来覆去好一会才想到原因,稍微改一下顺序。
<div>
<img id="img1" src="img/view1.jpg" alt="星星" width="300" height="300">
<input type="button" value="添加按钮" onclick="addButton()">
<input type="button" value="添加选择框" onclick="addSelect()">
<input type="button" value="添加图像" onclick="addImg()">
<div id="childDiv"></div>
</div>
<script type="text/javascript" charset="utf-8" async defer>
var x = document.getElementById("childDiv") /*有效的*/ ......
</script>
原来在在函数外写的 javascript 会在页面初始化之前就已经加载, 页面未初始化时自然就获取不到尚未加载的ID（childDiv）,而当把这段JavaScript代码放在页面之后，就可以正常使用。所有在学习的时候一定要注意加载顺序的问题，不要犯小韩这样的小白错误呀。
在JAVASCRIPT中，为什么document.getElementById不可以再全局（函数外）使用？
原文：https://www.cnblogs.com/mwxz/p/12431190.html