JavaScript只创建一个元素,多次点击不创建

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 300px;
            height: 300px;
            border: 1px solid pink;
        }
    </style>
</head>
<body>
<input type="button" value="创建按钮" id="bt"/>

<div id="dv"></div>
<script src="common.js"></script>
<script>
    //有则删除,无则创建

    //有责删除
//    my$("bt").onclick = function () {
//        //判断div中有没有这个元素有则删除
//        //判断这个按钮的子元素是否存在
//        if(my$("bt2")) {//为true就有
//            my$("dv").removeChild(my$("bt2"));
//        }
//        var btObj = document.createElement("input");
//        btObj.type = "button";
//        btObj.value = "按钮";
//        btObj.id = "bt2";
//        my$("dv").appendChild(btObj);
//    };

    //无则创建
    //判断div中有没有这个元素,无则创建
    //判断这个按钮的子元素是否存在
    my$("bt").onclick = function () {
      if(!my$("bt2")) {
          var btObj = document.createElement("input");
          btObj.type = "button";
          btObj.value = "按钮";
          btObj.id = "bt2";
          my$("dv").appendChild(btObj);
      }
    };
</script>
</body>
</html>

原文地址:https://www.cnblogs.com/cuilichao/p/9383201.html

时间: 2024-08-12 23:50:47

JavaScript只创建一个元素,多次点击不创建的相关文章

JS创建一个元素节点, 并把该节点添加为文档中指定节点的子节点

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <titl

javascript selenium判断一个元素存在的方法(CukeTest环境)

1.在[features]-[step_definitions]目录下创建自己的一个js文件,内容如下 var { Given, When, Then } = require('cucumber') const { driver } = require('../support/web_driver'); const {By,until,Key} = require('selenium-webdriver'); async function isExist(ele) { var bool=null

创建一个sms.db数据库俩面在创建一个message表,插入数据然后在读取数据

FMDB第三方库 导入头文件 #import "FMDatabase.h"#import "FMResultSet.h" FMDatabase *_database;//数据库对象 - (void)readData{     //1.获取数据库文件的路径     NSArray *path=NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES);    NSStrin

ng-repeat创建的元素实现单个点击选中

html <div ng-repeat="a in b" ng-click="click(a)" na-class="{{'classname':data ==='xxx'}}"></div> controller $scope.data = resp.xxxx; $scope.click=function(e){ console.log(e); }

使用JavaScript操作DOM节点元素的常用方法(创建/删除/替换/复制等)

getElementById(id)这是通过id来访问某一元素,最常用的之一,例:<html><body><div id="myid">test</div><script language="javascript">alert(document.getElementById("myid").innerHTML);</script></body></html&

你相信么,只需一个函数5行JS代码即可在Javascript中实现完整的AOP功能

你相信么,只需一个函数5行JS代码即可在Javascript中实现完整的AOP功能, 你相信么,在JavaScript只需一个函数5行代码即可实现完整的面向方面AOP编程功能.这5行代码的功能包括: 无限层次的函数无害拦截 函数执行前拦截 检查函数的参数值 重新设定函数的参数值 函数执行后拦截 检查函数执行后的返回结果 重新设定函数的返回结果 虽然动态函数式语言的效率是一个存在的问题,但是对于它的高度灵活性,简直让人令人惊叹不已,剧赞. 这个小小的函数源自于和爱明兄的一次讨论:在javascri

javascript 创建video元素

<!DOCTYPE html> <html> <body> <h3>演示如何创建 VIDEO 元素</h3> <p>请点击按钮来创建 VIDEO 元素,该元素将播放 .ogg 文件格式的影片.</p> <button onclick="myFunction()">试一下</button> <p id="demo"></p> <sc

如何使用CSS3创建一个漂亮的图标

今天,我想展示给你一个巧妙的花招.我们将创建一个纯CSS3文本图标.更让人震惊的是,这效果将只需要一个HTML元素. 游戏的计划 创建一个矩形盒子 设置圆角 使用伪类元素创建一个卷角效果 通过梯度渐变创建文本效果 让我们开始吧! 第一步:创建盒子 让我们加入唯一的HTML元素:一个锚标签.这是有理可依,因为大多数的图标同时也是一个链接. <a class="docIcon" href="#">Document Icon</a> 可以给图标设置

jQuery EasyUI使用教程之创建一个课程表

<jQuery EasyUI最新版下载> 本教程将为你展示如何使用jQuery EasyUI创建一个学校的课程表.我们将创建两个表:学校的科目在左边,时间表在右边,你可以拖动学校科目并将其放在时间表的单元格中.学校的科目是一个"div class='item'"元素,然而时间表单元格是一个"td class='drop'"元素. 查看演示 显示学校科目 < div class = "left" > < table &