<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
cursor: pointer;
}
div {
width: 200px;
height: 400px;
border: 2px solid red;
}
</style>
</head>
<body>
<input type="button" value="创建列表" id="btn" />
<div id="dv"></div>
<script src="common.js"></script>
<script>
var kungfu = ["降龙十八掌", "黯然销魂掌", "葵花宝典", "九阴真经", "吸星大法", "如来神掌", "化骨绵掌", "玉女心经", "极乐神功", "辟邪剑谱"];
my$("btn").onclick = function() {
//创建ul,把ul立刻加到父级元素div中
var ulObj = document.createElement("ul");
my$("dv").appendChild(ulObj);
//动态创建li,加到ul中
//对数组进行循环
for (var i = 0; i < kungfu.length; i++) {
var liObj = document.createElement("li");
//设置li中间的文字内容
liObj.innerHTML = kungfu[i];
ulObj.appendChild(liObj);
//高亮效果
//为li添加鼠标进入事件
liObj.onmouseover = onm ouseoverHandle;
//为li添加鼠标离开事件
liObj.onmouseout = onm ouseoutHandle;
}
};
//按钮的点击函数在外面
function onm ouseoverHandle() {
this.style.backgroundColor = "red";
};
function onm ouseoutHandle() {
this.style.backgroundColor = "";
};
//如果是循环的方式添加函数,推荐使用命名函数(以上的方法)——节省空间
//如果不是循环的方式添加函数,推荐使用匿名函数
</script>
</body>
</html>
