24 createElement方式动态创建列表

<!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 = onmouseoverHandle;
                    //为li添加鼠标离开事件
                    liObj.onmouseout = onmouseoutHandle;
                }
            };
            //按钮的点击函数在外面
            function onmouseoverHandle() {
                this.style.backgroundColor = "red";
            };

            function onmouseoutHandle() {
                this.style.backgroundColor = "";
            };
            
            //如果是循环的方式添加函数,推荐使用命名函数(以上的方法)——节省空间
            //如果不是循环的方式添加函数,推荐使用匿名函数
        </script>
    </body>
</html>
24 createElement方式动态创建列表

猜你喜欢
