Using jQuery .append to build table yielding incorrect html
<p>I wrote the following javascript to dynamically build a calendar and append it to a designated div.  It works and the calendar looks fine in the browser.</p>

<pre><code>$('#Calendar').append('&lt;table&gt;&lt;thead&gt;&lt;th&gt;Monday&lt;/th&gt;&lt;th&gt;Tuesday&lt;/th&gt;&lt;th&gt;Wednesday&lt;/th&gt;&lt;th&gt;Thursday&lt;/th&gt;&lt;th&gt;Friday&lt;/th&gt;&lt;th&gt;Saturday&lt;/th&gt;&lt;th&gt;Sunday&lt;/th&gt;&lt;/thead&gt;&lt;tr&gt;');

for (i = 0; i &lt;= loop; i++) {
    if ((i == 7) || (i == 14) || (i == 21) || (i == 28) || (i == 35)) {
        $('#Calendar').append(loopDate.getDate() + "&lt;/tr&gt;&lt;tr&gt;");
        $('#Calendar').append('&lt;td&gt;' + loopDate.getDate() + '&lt;/td&gt;');
        loopDate.addDays(1);
    } else {
        $('#Calendar').append('&lt;td&gt;' + loopDate.getDate() + '&lt;/td&gt;');
        loopDate.addDays(1);
    }
}
$('#Calendar').append('&lt;/table&gt;');

}
</code></pre>

<p>However, when I inspect the resulting HTML for the page I see that my <code>&lt;tr&gt;&lt;/tr&gt;</code> are not landing in the correct place.  There also appears to be an extraneous appended .  Can someone please explain to me why this is happening?</p>

<pre><code>&lt;div id="Calendar"&gt;
&lt;div&gt;&lt;/div&gt;
&lt;table&gt;
 &lt;thead&gt;
  &lt;tr&gt;
  &lt;th&gt;Monday&lt;/th&gt;
  &lt;th&gt;Tuesday&lt;/th&gt;
  &lt;th&gt;Wednesday&lt;/th&gt;
  &lt;th&gt;Thursday&lt;/th&gt;
  &lt;th&gt;Friday&lt;/th&gt;
  &lt;th&gt;Saturday&lt;/th&gt;
  &lt;th&gt;Sunday&lt;/th&gt;
  &lt;/tr&gt;&lt;/thead&gt;
  &lt;tbody&gt;
  &lt;tr&gt;&lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;td&gt;26&lt;/td&gt;
  &lt;td&gt;27&lt;/td&gt;
  &lt;td&gt;28&lt;/td&gt;
  &lt;td&gt;29&lt;/td&gt;
  &lt;td&gt;30&lt;/td&gt;
  &lt;td&gt;31&lt;/td&gt;
  &lt;td&gt;1&lt;/td&gt;
  &lt;tr&gt;&lt;/tr&gt;
  &lt;td&gt;2&lt;/td&gt;
  &lt;td&gt;3&lt;/td&gt;
  &lt;td&gt;4&lt;/td&gt;
  &lt;td&gt;5&lt;/td&gt;
  &lt;td&gt;6&lt;/td&gt;
  &lt;td&gt;7&lt;/td&gt;
  &lt;td&gt;8&lt;/td&gt;
  &lt;tr&gt;&lt;/tr&gt;
  &lt;td&gt;9&lt;/td&gt;
  &lt;td&gt;10&lt;/td&gt;
  &lt;td&gt;11&lt;/td&gt;
  &lt;td&gt;12&lt;/td&gt;
  &lt;td&gt;13&lt;/td&gt;
  &lt;td&gt;14&lt;/td&gt;
  &lt;td&gt;15&lt;/td&gt;
  &lt;tr&gt;&lt;/tr&gt;
  &lt;td&gt;16&lt;/td&gt;
  &lt;td&gt;17&lt;/td&gt;
  &lt;td&gt;18&lt;/td&gt;
  &lt;td&gt;19&lt;/td&gt;
  &lt;td&gt;20&lt;/td&gt;
  &lt;td&gt;21&lt;/td&gt;
  &lt;td&gt;22&lt;/td&gt;
  &lt;tr&gt;&lt;/tr&gt;
  &lt;td&gt;23&lt;/td&gt;
  &lt;td&gt;24&lt;/td&gt;
  &lt;td&gt;25&lt;/td&gt;
  &lt;td&gt;26&lt;/td&gt;
  &lt;td&gt;27&lt;/td&gt;
  &lt;td&gt;28&lt;/td&gt;
  &lt;td&gt;29&lt;/td&gt;
  &lt;/div&gt;
</code></pre>
