13动态创建列表

最新推荐文章于 2021-10-05 15:49:55 发布

陀陀吖

最新推荐文章于 2021-10-05 15:49:55 发布

阅读量157

点赞数

分类专栏： javascript之webAPI

本文链接：https://blog.csdn.net/weixin_40422393/article/details/91048643

版权

javascript之webAPI 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>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 = ["降龙十八掌", "黯然销魂掌", "葵花宝典", "九阴真经", "吸星大法", "如来神掌", "化骨绵掌", "玉女心经", "极乐神功", "辟邪剑谱"];

  //点击按钮动态的创建列表,把列表加到div中
  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 = mouseoverHandle;
      //为li添加鼠标离开事件
      liObj.onmouseout = mouseoutHandle;
    }
  };

  //此位置.按钮的点击事件的外面
  function mouseoverHandle() {
    this.style.backgroundColor = "red";
  }
  function mouseoutHandle() {
    this.style.backgroundColor = "";
  }

  //如果是循环的方式添加事件,推荐用命名函数
  //如果不是循环的方式添加事件,推荐使用匿名函数
</script>
</body>
</html>