重复div次

Question

如何在html页面上重复div X次， 假设我想设置方差来声明重复次数。 重复本节5次，我认为它与JS一起。

<div class="blackstrip">black</div>
<div class="bluestrip">
    BLUE
    <div class="whitestrip">WHITE strip</div>
</div>

我添加了css，因为它看起来很奇怪 -

.blackstrip{
opacity: 0.8;
width: 600px;
height: 100px;
background-color: black;
background-position: center;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
margin: 0 auto;

}

.bluestrip{
opacity: 0.5;
width: 600px;
height: 300px;
background-color: blue;
background-repeat: none;
padding-bottom: 10px;
position: relative;
margin-top:50px;
margin: 20px auto;

}

.whitestrip{
opacity: 0.8;
width: 100px;
height:300px;
background-color: gray;
position: relative;
float: right;
padding-top: 10px;
padding-bottom: 10px;
}

Answer 1

只需使用for循环，例如：

var amount = 5;
for (var i = 0; i < amount; i++){
    var new_div = document.createElement("div");
    new_div.className = "bluestrip";
    document.body.appendChild(new_div);
    console.log("This is repeat " + i);
}

  

简单的技术，是吗？

https://jsfiddle.net/d15e9r6z/

就像安德烈亚斯所说，如果你使用，它会更有效 DocumentFragment 更改多个DOM。