JQuery Simple Template

Tin

by Dean Meehan

HTML

<!-- Template -->
<script id="hidden-template" type="text/x-custom-template">
    <tr>
        <td class="first">Foo</td>
        <td id="bar">Bar</td>
    <tr>
</script>

<!-- Button -->
<button class="addRow">Click Me</button>

<!-- Target Div -->
<div id="target"></div>

JavaScript

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

$('button.addRow').click(function() {
		//Clone the template
    var item = $(template).clone();
    
    //Find the 
    $(item).find('.first').html("First");
    
    //Change 'bar' to '-Bar'
    $(item).find('#bar').html("-Bar");
    
    //Append to the source
    $('#target').append(item);
});