Edit in JSFiddle

var data = {
    people: [
        {
            name: "Dan Wahlin",
            shirtColor: "white "
        }, {
            name: "John Papa ",
            shirtColor: "black"
        }, {
            name: "Scott Guthrie ",
            shirtColor: "red"
        }
    ]
};

$('#goBtn').click(function(){
$("#output").html($("#template").render(data));
});

$('#clrBtn').click(function(){
$('#output').empty();
});

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div id="output"></div>

<script id="template" type="text/x-jsrender">
    <ul>
    {{for people}}
        <li>{{:name}} likes to wear {{:shirtColor}} shirts</li>
    {{/for}}
    </ul>
</script>

<button id="goBtn" class="btn btn-primary">Go JsRender</button>
<button id="clrBtn" class="btn btn-danger">Clear</button>

body {
    margin: 15px;
}