jQuery를 사용하여 .append를 사용하여 잘못된 html을 생성하는 테이블을 작성하십시오.

Question

다음 JavaScript를 동적으로 작성하여 지정된 div에 추가하십시오. 그것은 작동하고 달력은 브라우저에서 잘 보인다.

$('#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에 한 번에 넣을 수 있습니다.