分离JavaScript与HTML

我们来从上个例子“用JavaScript批量访问HTML元素”谈起，我们定义了一个JS函数，在HTML中写一个按钮来调用函数。但是假设这样一种情景：访客的浏览器不支持JS，或者是禁用了JS，那么按钮仍然会显示出来。但是这时用户点击按钮不会有任何事件发生，显然这不是我们希望的结果。

因此，我们希望如果访客的浏览器不支持JS，那么按钮也不会显示出来，也就是分离JavaScript与HTML。

实例JavaScript代码

与上一个例子对比，我们使用JS来生成按钮，具体意思见注释。

<script type="text/javascript">
function test(){
	var testUL = document.getElementById("testUL");
	var listItems = testUL.getElementsByTagName("LI");
	for (var i=0; i<listItems.length; i++) {
		listItems[i].onmouseover=function() {
			this.className = "important";
		}
		listItems[i].onmouseout=function() {
			this.className = "";
		}
	}
}
window.onload = function() {
//创建一个button元素
var button = document.createElement('button');
//创建文字节点
var buttonText = document.createTextNode('给所有的li元素添加鼠标事件');
//将文字添加到按钮
button.appendChild(buttonText);
//设置点击按钮时调用的函数
button.onclick = test;
//找到插入按钮的地方，这里仅仅是一个示例,
//实际需要根据文档的结构修改插入位置
var contentDIV = document.getElementById("content");
//插入按钮
contentDIV.appendChild(button);	
}
</script> 

由于按钮会自动生成，所以本例的HTML代码只有一个ul。

<ul id="testUL">
  <li>HTML写内容</li>
  <li>CSS控制外观</li>
  <li>JavaScript控制行为</li>
</ul>