使用javascript中的循环创建HTML代码块

Question

我想使用循环创建10次html代码块。 我在google中搜索并也得到了一些建议，但是我无法在div中创建div。 下面是我想使用循环创建的代码。 我可以使用php来做到这一点，但我想使用javascript。

<div class="row text-center">
<div class="col-sm-5" id="content">
    <div class="containers">
        <img data-toggle="magnify" src="images/wallets/w0.png" alt="" id="mainImage">
    </div>
    <div class="substituteImageContainer">
        <img src="images/wallets/w0.png" id="substituteImage0" class="substituteImage" onclick="changeProductImageToSubImage(this.src)">
        <img src="images/wallets/1.png" id="substituteImage1" class="substituteImage" onclick="changeProductImageToSubImage(this.src)">
        <img src="images/wallets/2.png" id="substituteImage2" class="substituteImage" onclick="changeProductImageToSubImage(this.src)">
        <img src="images/wallets/3.png" id="substituteImage3" class="substituteImage" onclick="changeProductImageToSubImage(this.src)">
        <img src="images/wallets/4.png" id="substituteImage4" class="substituteImage" onclick="changeProductImageToSubImage(this.src)">
    </div>
</div>
<div class="col-sm-7 text-left">
    <h3>Product Name. : Cobbler Men's Leather Wallet - Black</h3>
    <p>Description</p>
    <ul class="descriptionText">
         <li>Tastefully selected best-grade Cow leather, soft touch and feel, artistically handcrafted, classical looks and well-organised interior</li>
         <li>2 Note compartments, 3 Credit Card slots, 1 slip pocket, 1 Coin pocket, 1 Key slot</li>
         <li>Comes packed in a beautiful Gift-Box</li>
         <li>Disclaimer: Actual product colour may vary slightly due to photographic lighting and/or your monitor settings.</li>
    </ul>
    <div class="container-fluid nomargin nopadding">
        <div class="row productSpecifications nomargin nopadding">
            <div class="col-sm-4 nomargin nopadding"><strong>Model Number : </strong><span id="modelNo">90876K</span></div>
            <div class="col-sm-4 nomargin nopadding"><strong>Material : </strong><span id="modelMaterial">Leather</span></div>
        </div>
        <div class="row productSpecifications nomargin nopadding">
            <div class="col-sm-4 nomargin nopadding"><strong>Item Height : </strong><span id="modelHeight">9.5</span> Cm</div>
            <div class="col-sm-4 nomargin nopadding"><strong>Item Length : </strong><span id="modelLength">25</span> Cm</div>
        </div>
        <div class="row productSpecifications nomargin nopadding">
            <div class="col-sm-4 nomargin nopadding"><strong>Item width : </strong><span id="modelWidth">10</span> Mm</div>
            <div class="col-sm-4 nomargin nopadding"><strong>Item Weight : </strong><span id="modelWeight">50</span> Gm</div>
        </div>
    </div>
    <br>
    <a href="contact.html" class="biscuit">Enquire about this product</a>
</div>

Answer 1

使用document.write方法：

 for(var i=0; i<10; i++) { document.write('<div>Your content here</div>'); } 

 <div id="root"> </div>