Defining a HTML template to append using JQuery

You could decide to make use of a templating engine in your project, such as:

• mustache
• underscore.js
• handlebars

If you don’t want to include another library, John Resig offers a jQuery solution, similar to the one below.

---

Browsers and screen readers ignore unrecognized script types:

<script id="hidden-template" type="text/x-custom-template">
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    <tr>
</script>

Using jQuery, adding rows based on the template would resemble:

var template = $('#hidden-template').html();

$('button.addRow').click(function() {
    $('#targetTable').append(template);
});