js原生实现点击事件只创建一个元素

问题：注册点击事件的时候，多次点击则会重复多次的创建元素

要求：不论点击多少次，只创建一次

思路：触发点击事件，若有，则不创建，若无，则创建

 

基础HTML代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 200px;
      height: 200px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>

</body>
</html>

 

 

 

代码如下:

　　

  document.getElementById("btn").onclick=function () {
    //判断,div中有没有这个按钮,有就删除
    //判断这个按钮的子元素是否存在
    if(!document.getElementById("btn2")){//如果为false则创建
      var obj=document.createElement("input");
      obj.type="button";
      obj.value="按钮";
      obj.id="btn2";
      document.getElementById("dv").appendChild(obj);
    }

  };

 

posted @ 2019-03-18 09:22  shadowsmile  阅读(4083)  评论(0)  编辑  收藏  举报