在javascript中使用循環創建html代碼塊

我想用循環10次創建一個html代碼塊。我在谷歌搜索&也得到了一些建議，但我無法在div中創建div。以下是我想要使用循環創建的代碼。我可以使用PHP來做到這一點，但我想使用JavaScript。在javascript中使用循環創建html代碼塊

<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>

來源

2017-06-21 Debabrata Roy

使用document.write方法：

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

<div id="root"> 
 

 
</div>

來源

2017-06-21 11:16:16

謝謝... :) –

在javascript中使用循環創建html代碼塊

回答

相關問題