<!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>