如何避免 HTML 中的重复代码？

Question

Suppose i have a class as follows which shows the available items i want to sell on my website. How should i avoid writing the same code again and again when i add new products to my site. Everytime i add a new product, only its image and the page where it points to will change. Is there any way to manage this efficiently ? Thanks in advance

<div class="sale">
        <div class="img-container"><a href="#"><img src="1.png">Product1</a></div>
        <div class="img-container"><a href="#"><img src="2.png">Product2</a></div>
        <div class="img-container"><a href="#"><img src="3.png">Product3</a></div>
        <div class="img-container"><a href="#"><img src="4.png">Product4</a></div>
</div>

Answer 1

basically first you have to learn any server side technologies (eg, Asp, NodeJS. PHP etc.) and database (eg, mysql, MS Sql server) then, I am sure you will get your answer. More importantly also learn Javascript or its one of library Jquery or preferably AngularJS . For creating dynamic html you have to command on Javascript at least

Answer 2

There are lot many options to achieve DHTML. A basic example using JavaScript:

 var details = [{ 'img': "http://simpleicon.com/wp-content/uploads/light-bulb-6.svg", 'lbl': "Product 1" }, { 'img': "http://images.clipartpanda.com/light-bulb-vector-png-9czEXKbbi.svg", 'lbl': "Product 2" }, { 'img': "http://images.clipartpanda.com/light-bulb-vector-png-light-bulb-7.svg", 'lbl': "Product 3" }]; var html = ""; for (var i = 0, l = details.length; l > i; i++) { html += "<div class=\\"img-container\\">"; html += "<a href=\\"#\\">"; html += "<img src=\\"" + details[i].img + "\\">" + details[i].lbl + "</a>"; html += "</div>"; } document.getElementsByClassName('sale')[0].innerHTML = html; 

 .sale { border: 1px ridge grey; } .img-container { border: 1px dashed grey; margin: 3px; display: inline-block; padding: 3px; } .img-container img { width: 100px; } 

 <div class="sale"> <div class="img-container"> <a href="#"> <img src="1.png">Product1</a> </div> <div class="img-container"> <a href="#"> <img src="2.png">Product2</a> </div> <div class="img-container"> <a href="#"> <img src="3.png">Product3</a> </div> <div class="img-container"> <a href="#"> <img src="4.png">Product4</a> </div> </div> 

Answer 3

Almost in Every Back-end Technologies like as Node.js , Django there is a concept called template . If you know or learn template then you can avoid repetition of your html code.And you can re-use your html code in another html files.

for Node.js template

for Django template