my jQuery template is not working

I have written the following code inside showallinstructors.cshtml.

<h2>Instructors List</h2>
<table border="1">
    <thead>
        <tr>
            <th>Name</th>
            <th>Hire Date</th>
            <th>Twitter</th>
            <th>Technologies</th>
        </tr>
    </thead>
    <tbody id="instructorsList">
        @*Insert instructors here*@
    </tbody>
</table>

and the following code inside section of _Layout.cshtml file

<head>
//I have omitted the default Render code
<script type="text/javascript">

var instructors = [
    { FirstName: "Matt", HireDate: new Date(2005, 6, 1), Twitter: "milnertweet", FavoriteTech: [{ Name: "jQuery" }, { Name: "WF" }, { Name: "BizTalk" }] },
    { FirstName: "Fritz", HireDate: new Date(2004, 8, 1), Twitter: "fritzonion", FavoriteTech: [{ Name: "ASP.NET" }, { Name: "JavaScript" }, { Name: "CSS" }] },
    { FirstName: "Aaron", HireDate: new Date(2004, 8, 1), Twitter: "skonnard" }
];

$(function () {
    $("#instructorTemplate").tmpl(instructors).append("#instructorsList");
});
</script>

<script id="instructorTemplate" type="text/x-jquery-tmpl">
    <tr>
        <td>${FirstName}</td>
        <td>${HireDate}</td>
        <td>${Twitter}</td>
        <td>${Technologies}</td>
    </tr>
</script>
</head>

I expect the output to be shown in tabular format using jQuery templates.

I am getting nothing but just table headings.

Hence, I have verified view-source. But, I could not understand where the problem is.

Can anybody please suggest me where I am doing mistake. I don't have anybody to suggest except my stackoverflow.

EDIT: When I have debugged the code, I have found that all instructors are coming into "instructors" variable. But, just not populating. I don't have clue on how to do it.

Solution

Very minor mistake.

The above code should be:

$(function () {
    $("#instructorTemplate").tmpl(instructors).appendTo("#instructorsList");
});

I have replaced append with appendTo. That's it.