<!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. wish - 简单的窗口式(windowing) shell

    总览 wish [filename] [arg] [arg ...] 选项 -colormap new 指定窗口使用一个新的私有的调色板(colormap)而不使用给屏幕的缺省的调色板. -displ ...

  2. lnmp高人笔记

    http://www.cnblogs.com/qizekai/p/5878774.html http://www.cnblogs.com/qizekai/p/5879461.html

  3. 传统的dom的渲染方式

    DOM渲染的过程大致分为三个阶段: 后端渲染 前端渲染 独立DOM渲染(前后端相结合渲染) 1.后端渲染:DOM树的生成完全是在后端服务器中完成的,后端服务器的程序会把需要的数据拼合成一个类似于前端D ...

  4. 一道Oracle子查询小练习

    一道Oracle子查询小练习   昨天晚上躺在床上看Oracle(最近在学习这个),室友说出个题目让我试试.题目如下: 有如下表结构,请选择出成绩为前三名的人的信息(如果成绩相同,则算并列),表名为t ...

  5. Nacos v0.7.0：对接CMDB，实现基于标签的服务发现能力

    Nacos近期发布了0.7.0版本,该版本支持对接第三方CMDB获取CMDB数据.使用Selector机制来配置服务的路由类型.支持单机模式使用MySQL数据库.上线Node.js客户端,并修复了一些 ...

  6. go操作空指针导致supervisor进程服务挂机的坑

    一.起因 在数据库中直接手动插入了某条记录,但由于该记录的某个字段的空值,与另一个字段的状态码不符合,在go程序中,突然操作了该空字段的指针,导致程序panic挂机. panic: runtime e ...

  7. （转）I帧,P帧,B帧 .

    转:http://blog.csdn.net/abcjennifer/article/details/6577934 视频压缩中,每帧代表一幅静止的图像.而在实际压缩时,会采取各种算法减少数据的容量, ...

  8. Java集合综述

    Java集合图,虚线框为接口,实线框是具体的类 具体实现类 基本使用 (1)List: List基本操作 ArrayList<String> arrayList = new ArrayLi ...

  9. 缓冲（cache）和缓存（buffer）

    缓存: 指把常用数据存储到可以快速获取的区域,以备重复利用 一般叫做cache. 缓存能提高效率 缓冲: 是指在数据流转过程中,不同层次速度不一致时,利用缓冲区来缓解上下层之间速率问题(性能差异) 一 ...

  10. Map、可变参数、静态导入、Collections、Arrays、集合嵌套

    Map双列集合 key 键 value 值 方法: put(K, V) //判断key值是否相等,相等,覆盖元素,不相等,存储 remove(K) Map集合的遍历(不要看到java提供了很多方法做一 ...