<!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. Ansible配置及使用

    使用公私钥实现ssh无密码登录 生成公钥和私钥 ssh-keygen -t rsa 公钥相当于锁id_rsa.pub,私钥相当于钥匙id_rsa 借用ssh-copy-id工具实现无密码登录 ssh- ...

  2. .net 接受请求过来的流

    //接收POST过来的数据 System.IO.Stream s = Request.InputStream; int count = 0; byte[] buffer = new byte[1024 ...

  3. split的用法

    split用法返回的是数组 使用split('')根据空格返回数组 使用split()返回一个完整的数组 使用split("",3)返回前三项,是单个的字母 不过要注意: 使用sp ...

  4. java字符串简单介绍

    String:String对象初始化之后不可变线程安全简单的字符串操作使用String效率更高 StringBuffer:StringBuffer对象初始化之后可改变线程安全频繁的字符串操作可以使用S ...

  5. identifier of an instance of xx.entity was altered from xxKey@249e3cb2 to xxKey@74e8f4a3; nested exception is org.hibernate.HibernateException: identifier of an instance of xxentity was altered from错误

    用entityManager保存数据时报错如下 identifier of an instance of xx.entity was altered from xxKey@249e3cb2 to xx ...

  6. SQLite3与C++的结合应用

    SQLite并没有一次性做到位,只有下载这些东西是不能放在vs2010中并马上使用的,下载下来的文件中有sqlite3.c/h/dll/def,还是不够用的.我们需要的sqlite3.lib文件并不在 ...

  7. hibernate_04_hibernate多对多的关系映射

    1.实体类的多对多的关系映射 一个用户可以有多个角色 User.java public class User { private Long user_id; private String user_c ...

  8. php socket 发送HTTP请求 POST json

    * HttpRequest.php <?php namespace et\http; /** * Created by PhpStorm. * User: mingzhanghui * Date ...

  9. vue 绑定多个class

    <div :class="[box,shadow]"></div> 或 :后面跟条件,条件成立则添加class,否则不添加 :class="[{' ...

  10. mysql的建表约束

    主键约束(primary key) 主键约束能够唯一确定一张表中的记录,也就是可以通过某个字段添加约束,就可以是的该字段不重复,且不为空 create table user (id int prima ...