Trouble with dynamic HTML table with Mustache & Icanhazjs

Question

I am trying to build a table dynamic table using Icanhazjs (Mustache). The table data is always being rendered outside the table tag and thus does not put my data in the table.

You can see the output in my JSfiddle Here

Here is my HTML:

<script id="display_row" type="text/html">
    <tr>
        <td>{{data1}}</td>
        <td>{{data2}}</td>
        <td>{{data3}}</td>
    </tr>
</script>

<h1>Icanhazjs & Mustache Table Test</h1>
<table border="1">
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody>
        <div id="table_list"></div>
    </tbody>
</table>

And here is the Javascript:

$(document).ready(function () {
    var user_data, user;

    user_data = [
        {
            data1: "foo1",
            data2: "foo2",
            data3: "foo3"
        },
        {
            data1: "foo4",
            data2: "foo5",
            data3: "foo6"
        }
    ];

    for (i=0; i<user_data.length; i++) {
        user = ich.display_row(user_data[i]);
        $('#table_list').append(user);
    }
});

Can anybody explain why the data is not being rendered within my html table at the <div id="table_list"></div> point. The icanhazjs is working but just put the rendered html before my table.

Answer 1

Instead of

<tbody>
    <div id="table_list"></div>
</tbody>

Try this:

<tbody id="table_list">
</tbody>

JSFiddle:

http://jsfiddle.net/sapy7/1/