<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        body{font-family: "Microsoft YaHei",serif;}

        body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin: 0;}

        ol,ul,li{margin: 0;padding: 0;list-style: none;}

        img{border: none}

        #wrap div{

            float: left;

            width: 50px;

            height: 50px;

            margin: 5px;

            background-color: pink;

        }

    </style>

</head>

<body>

<button id="btn">点击生成10个div</button>

<div id="wrap"></div>

<script>

    let oWrap = document.getElementById('wrap'),

        oBtn = document.getElementById('btn');

    // oBtn.onclick = function () {

    //     for (let i = 0; i<10-vue-router ; i++){

    //         oWrap.innerHTML += '<div></div>';

    //     }

    // }

    // 注意这样是不可取的  循环中不要添加dom事件

    oBtn.onclick = function () {

        let html = '';

        for (let i=0 ; i<10; i++) {

            html += '<div></div>'

        }

        oWrap.innerHTML += html;

    }

</script>

</body>

</html>

10-2-点击生成10个div的更多相关文章

  1. JS随机生成100个DIV每10个换行(换色，生成V字和倒V)

    附图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...

  2. c#部分---网吧充值系统；简易的闹钟；出租车计费；简单计算器；对战游戏；等额本金法计算贷款还款利息等；随机生成10个不重复的50以内的整数；推箱子；

    网吧充值系统namespace ConsoleApplication1 { class Program { struct huiyuan { public string name; public st ...

  3. 【转】Oracle中如何用一条SQL快速生成10万条测试数据

    转自http://blog.csdn.net/welken/article/details/4971887   做数据库开发或管理的人经常要创建大量的测试数据,动不动就需要上万条,如果一条一条的录入, ...

  4. 使用python找出nginx访问日志中访问次数最多的10个ip排序生成网页

    使用python找出nginx访问日志中访问次数最多的10个ip排序生成网页 方法1:linux下使用awk命令 # cat access1.log | awk '{print $1" &q ...

  5. js生成1-100不重复的随机数及生成10个1-100不重复的随机数

    //生成1-100不重复的随机数 var count=100; var a=new Array(); for(var i=0;i<100;i++){ a[i]=i+1; } a.sort(fun ...

  6. Python3基础 dict 推导式 生成10以内+奇数的值为True 偶数为False的字典

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  7. 【JavaScript】随机生成10个0~100的数字

    随机生成10个0~100不重复的数字(包含0和100): 需要用到的知识点:随机数 去重 下面放代码 <!DOCTYPE html> <html> <head> & ...

  8. python3生成10个成绩列表，求其平均分

    import random alist = [random.randint(45,101) for _ in range(10)] #在[45.101)之间生成10个随机数 print(alist) ...

  9. Python生成10个八位随机密码

    #生成10个八位随机密码 import random lst1=[ chr(i) for i in range(97,123) ] #生成26为字母列表 lst2=[i for i in range( ...

随机推荐

  1. 2019-10-9-dotnet-不申请额外数组空间合并多个只读数组列表

    title author date CreateTime categories dotnet 不申请额外数组空间合并多个只读数组列表 lindexi 2019-10-09 15:15:10 +0800 ...

  2. BlueHost主机建站方案怎样选择？

    BlueHost是知名美国主机商,近年来BlueHost不断加强中国市场客户的用户体验,提供多种主机租用方案,基本能够满足各类网站建设需求.下面就和大家介绍一下建站应该怎样选择主机. 1.中小型网站 ...

  3. 在Spring-boot中，为@Value注解添加从数据库读取properties支持

    一般我们会把常用的属性放在工程的classpath文件夹中,以property,yaml或json的格式进行文件存储,便于Spring-boot在初始化时获取. @Value则是Spring一个非常有 ...

  4. overload和override二者之间的区别

    overload和override三者之间的区别 Overload是重载,是有相同的方法名,但参数类型或个数彼此不同Override是重写,是在子类与父类中,子类中的方法的方法名,参数个数.类型都与父 ...

  5. VS2010-MFC（MFC常用类：定时器Timer）

    转自:http://www.jizhuomi.com/software/232.html 前面一节讲了CTime类和CTimeSpan类的使用,本节继续讲与时间有关的定时器.定时器并不是一个类,主要考 ...

  6. VS2010-MFC（对话框：字体对话框）

    转自:http://www.jizhuomi.com/software/175.html 字体对话框的作用是用来选择字体.我们也经常能够见到.MFC使用CFontDialog类封装了字体对话框的所有操 ...

  7. 伪造ip头

    x-forwarded-for: 127.0.0.1x-remote-IP: 127.0.0.1x-remote-ip: 127.0.0.1x-client-ip: 127.0.0.1x-client ...

  8. js中一个标签在按顺序执行没有被读取到时可以用window.onload

    <%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%> <!DOCTYPE html PUBLIC " ...

  9. springboot-配置多数据源（AOP实现）（HikariCP + MybatisPlus + mysql + SqlServer）

    场景: springboot项目,默认使用HikariCP连接池 + MybatisPlus持久层框架 + mysql数据库等一套流程,现需求需去第三方sqlserver数据库拉取数据,直连数据库,不 ...

  10. [WPF自定义控件]?使用WindowChrome自定义Window Style

    原文:[WPF自定义控件]?使用WindowChrome自定义Window Style 1. 为什么要自定义Window 对稍微有点规模的桌面软件来说自定义的Window几乎是标配了,一来设计师总是克 ...