<script type="text-custom-template" id="hidden-template">
<div class="box">
<h3 id="box-name"></h3>
<p id="box-text"></p>
<img id="box-image" />
</div>
</script>
<div id="target">Loading...</div>
.box{
border: 1px solid #000;
padding:15px 0 0 15px;
width: 135px;
height:135px;
margin-right:5px;
display:inline-block;
background-color:#ddd;
color:#444;
}
.box img{
width:50%;
padding-left:20%;
}
$(function() {
var template = $('#hidden-template').html();
var results = [{boxName:"Dog",boxText:"Lorem Ipsum",boxImage:"https://darrenwelch.co.uk/images/dog.gif"},{boxName:"Cat",boxText:"dolor sit amet",boxImage:"https://darrenwelch.co.uk/images/cat.gif"},{boxName:"Mouse",boxText:"consectetur",boxImage:"https://darrenwelch.co.uk/images/mouse.gif"},{boxName:"Turtle",boxText:"adipiscing elit",boxImage:"https://darrenwelch.co.uk/images/turtle.gif"}];
//reset
$('#target').html("");
//load from json
$.each(results, function (i, item) {
var box = item;
var myTemplate = $(template).clone();
$(myTemplate).find('#box-name').text(box.boxName);
$(myTemplate).find('#box-text').text(box.boxText);
$(myTemplate).find('#box-image').attr("src",box.boxImage);
$('#target').append(myTemplate);
});
});
This Pen doesn't use any external CSS resources.