<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div { width: 300px; height: 400px; border: 2px solid pink; } li { list-style-type: none; margin: 0; padding: 0; cursor: pointer; } </style> </head> <body> <input type="button" value="创建列表" id="bt"/> <div id="dv"></div> <script src="common.js"></script> <script> var kungfu = ["降龙十八掌", "打狗棒法", "北冥神功", "易筋经", "含笑半步癫", "天地明灭"]; //点击按钮动态创建列表,把列表加入到div中 my$("bt").onclick = function () { //创建ul,把ul立刻加入到父级元素中 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]; //将li追加到ul中 ulObj.appendChild(liObj); //为li添加鼠标进入事件 liObj.onmouseover = mouseoverHandle; //为li添加鼠标离开事件 liObj.onmouseout = mouseoutHandle; } }; //按钮的点击事件外面 function mouseoverHandle() { this.style.backgroundColor = "red"; } function mouseoutHandle() { this.style.backgroundColor = ""; } </script> </body> </html>