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

Poetry Code

于 2019-08-05 19:52:31 发布

阅读量735

点赞数 5

分类专栏： JavaScript 文章标签： JavaScript 前端原生

本文链接：https://blog.csdn.net/weixin_44253336/article/details/98511901

版权

JavaScript 专栏收录该内容

24 篇文章 3 订阅

订阅专栏

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

要求：无论点击多少次，元素只能建一个

思路：触发点击事件时候，有则删除,无则创建。

基础HTML代码如下：

<body>
	<input type="button" value="创建元素" id="btn"/>
	<div id="dv"></div>
</body>

解决思路：

     document.getElementById("btn").onclick = function () {
        //判断这个按钮是否存在
        if (!my$("btn2")) {   //如果没有这个按钮就创建，有的话就不再管它，不用创建
            var obj = document.createElement("input");
            obj.type = "button";
            obj.value = "按钮";
            obj.id = "btn2";  //创建的时候为它赋值id，以便进行判断
            document.getElementById("dv").appendChild(obj);
        }

    };