动态创建列表，高亮显示

动态创建列表，高亮显示

效果如下：

1. 创建之前：
   
2. 创建之后：
   
   body部分

<ul></ul>
<script>
var ul = document.getElementsByTagName("ul")[0];
var arr = ["原味瓜子","奶油瓜子","五香瓜子","脑袋瓜子"];
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function(){
	ul.innerHTML = "";// 防止多次创建列表
	for(var i=0; i<arr.length; i++){
	//添加列表
		var liArr = document.createElement("li");
		liArr.innerHTM = "<li>"+arr[i]+"</li>";
		ul.appendChild(liArr);
	}
	// 高亮显示
	var newArr = ul.child;
	for(var i=0; i<newArr.length; i++){
		newArr[i].onmouseover = function(){
			for(var j=0; j<newArr.length; j++){
				newArr[j].style.backgroundColor = "";
			}
			this.style.backgroundColor = "red";
		}
	}
}