An old question, but since the question is “using jQuery”, I thought I would provide an option that would allow you to do this without introducing any vendor dependency.
Despite the fact that there are many templates in the world, many of their functions have recently become disillusioned with iteration ( <% for ), conventions ( <% if ) and transformations ( <%= myString | uppercase %> ), considered as a micro language in the best and anti-worst case patterns. Modern template methods simply encourage matching an object with its representation of the DOM (or other), for example. what we see with properties mapped to components in ReactJS (especially non-idle components).
Templates inside HTML
One property you can rely on to store HTML code for your template next to the rest of your HTML is to use an unused <script> type , for example. <script type="text/template"> . For your case:
<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>
When loading a document, read your template and mark it with a simple String#split
var itemTpl = $('script[data-template="listitem"]').text().split(/\$\{(.+?)\}/g);
Please note that with our token you get it in the variable format [text, property, text, property] . This allows us to nicely map it using Array#map with a display function:
function render(props) { return function(tok, i) { return (i % 2) ? props[tok] : tok; }; }
Where props might look like { url: 'http://foo.com', img: '/images/bar.png', title: 'Lorem Ipsum' } .
Putting it all together, if you have analyzed and loaded your itemTpl as described above, and you have an array of items in the scope:
$('.search').keyup(function () { $('.list-items').append(items.map(function (item) { return itemTpl.map(render(item)).join(''); })); });
This approach is also just barely jQuery - you should use the same approach using vanilla javascript with document.querySelector and .innerHTML .
jsfiddle
Templates inside JS
The question you ask yourself is: do you want / need to define templates as HTML files? You can always build + reuse a template in the same way you would reuse most of the things you want to repeat: using a function.
In es7-land, using destructuring, pattern lines, and arrow functions, you can write completely beautiful component components that can be easily loaded using the $.fn.html method above.
const Item = ({ url, img, title }) => ` <a href="${url}" class="list-group-item"> <div class="image"> <img src="${img}" /> </div> <p class="list-group-item-text">${title}</p> </a> `;
Then you can easily display it, even displayed from an array, for example:
$('.list-items').html([ { url: '/foo', img: 'foo.png', title: 'Foo item' }, { url: '/bar', img: 'bar.png', title: 'Bar item' }, ].map(Item).join(''));
Oh and one final note: do not forget to sanitize your properties passed to the template if they are read from the database, or someone can pass HTML (and then run scripts, etc.) from their page.