javascript - 重复一个 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);
}

Simple technic, huh?

https://jsfiddle.net/d15e9r6z/

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