jQueryを使用して.appendを使ってテーブルを作成して間違ったhtmlを生成する

Question

カレンダーを動的に作成し、指定したdivに追加するには、次のjavascriptを記述しました。それは動作し、カレンダーはブラウザで正常に見えます。

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

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

} 

しかし、私は私が<tr></tr>が正しい場所に着陸されていないことを確認したページの結果のHTMLを検査するとき。また、余分なものが追加されているように見えます。誰かがなぜこれが起こっているのかを私に説明してもらえますか？このようappend()として

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

Answer 1

jQueryのメソッドは、ブラウザのDOMツリーを操作します。
DOMにはの完全な HTML要素が格納されています。あなたはタグの半分を置くことはできません。

代わりに、HTMLを文字列に連結して（またはパフォーマンスを向上させるために、配列として）、完全なHTML文字列をDOMに一度に入れることができます。