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>