10-2-点击生成10个div

<!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>

来源：https://www.cnblogs.com/zhangyu666/p/11479636.html

标签

div

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!