<!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. 2018-10-29-微软-Tech-Summit-技术暨生态大会课程-·-基于-Roslyn-打造高性能预编译框架...

    title author date CreateTime categories 微软 Tech Summit 技术暨生态大会课程 · 基于 Roslyn 打造高性能预编译框架 lindexi 2018 ...

  2. Spark运行架构设计

  3. 用Jquery写返回顶部代码

    <!DOCTYPE html><html><head><meta charset="utf-8" /><title>jq ...

  4. for循环和字典预习

    print("*" *8)for a in range(1,9): print(a,end="")#1-9的奇数print()for a in range(1, ...

  5. HTML --- 简单的标签

    HTML --- 简单的标签 html概述和基本结构 html概述 HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是 ...

  6. LUOGU P4253 [SCOI2015]小凸玩密室(树形dp)

    传送门 解题思路 玄学树形\(dp\),题目描述极其混乱...看错了两次题,设首先根据每次必须点完子树里的灯才能点别的,那么点灯情况只有两种,第一种是点到某一个祖先,第二种是点到某一个祖先的兄弟.所以 ...

  7. 有关axios的request与response拦截

    // http request 拦截器 axios.interceptors.request.use( config => { var token = localStorage.getItem( ...

  8. 浅谈简单实现file控件的图片预览，裁剪和上传。

    1.图片预览之FileReader对象    FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用File或Blob对象指定要读取的文件或数据 ...

  9. c++ const的用法

    1.修饰成员变量 int value=0; int *p=&value; const int *p_c=&value;//指针指向常量,但是指针所指向的地址可以修改(int const ...

  10. pickle，shelve，json，configparser 的模块使用

    主要内容1. 什么是序列化2. pickle3. shelve4. json5. configparser模块 一. 什么是序列化在我们存储数据或者网络传输数据的时候. 需要对我们的对象进行处理. 把 ...