JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/template" data-template="listitem">
<a href="${url}" class="list-group-item">
<table>
<tr>
<td><img src="${img}"></td>
<td>
<p class="list-group-item-text">${title}</p>
</td>
</tr>
</table>
</a>
</script>
<ul class="list-items">
</ul>
JavaScript
function render(props) {
return function(tok, i) {
return (i % 2) ? props[tok] : tok;
};
}
var items = [{
url: 'http://foo.com',
img: '/images/bar.png',
title: 'Lorem Ipsum'
}];
$(function() {
var itemTpl = $('script[data-template="listitem"]').html();//text().split(/\$\{(.+?)\}/g);
$('.list-items').append(items.map(function(item) {
return itemTpl.map(render(item)).join('');
}));
});