Create html block of code using loop in javascript

Question

I want to create a block of html codes using loop 10 times. I searched in google & got some suggestions also, but I'm not able to create div within div. Below is the code i want to create using loop. I can do this using php, but I want to it using 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>

David Hallberg Jönsson · Accepted Answer · 2017-06-21 11:16:16Z

1

Use the document.write method:

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

<div id="root">

</div>

answered Jun 21, 2017 at 11:16

David Hallberg Jönsson

8725 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Create html block of code using loop in javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related