how can I make a html and css component by javascript?

I want to summarize my html code and making a component by Javascript. My Html code contains list of picture that I put them in < li > tags. every picture has special link , and a number into a < div > tag.how can I make a pattern for generate them by javascript? Also I want to sort these pics by that numbers,according to, highest to lowest , and I don't know how to do that. Totally,Is it true to summarize html code by this way?

<ul class="product-list">
             <li class="product-item">
                 <a id="producItem1" href="page2.htm">
                     <img class="clothes" src="dress1.jpg">
                 </a>
                 <div class="price-holder">
                     <p id="price1">250,000</p>
                 </div>
             </li>
              <li class="product-item">
                 <a id="producItem2">
                     <img class="clothes" src="coat1.jpg">
                 </a>
                 <div class="price-holder">
                     <p id="price2">350,000</p>
                 </div>
              </li>
             <li class="product-item">
                  <a id="producItem3">
                     <img class="clothes" src="shirt1.jpg">
                 </a>
                 <div class="price-holder">
                     <p id="price3">150,000</p>
                 </div>
             </li>
             <li class="product-item">
                 <a id="producItem4">
                     <img class="clothes" src="skirt1.jpg">
                 </a>
                 <div class="price-holder">
                     <p id="price4">200,000</p>
                 </div>
             </li>
             </ul>