重复div次

Question

how to repeat a div X times over html page, lets say I want to set variance to declare times of repeat. repeat this section 5 times, I assume it's with JS.

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

I'm adding the css as it comes out strange look -

.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

Just use a for loop eg:

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/

Like Andreas said, it is more effective if you use DocumentFragment to change multiple DOM's.