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>');

}

但是，当我检查页面的结果HTML时，我发现我的<tr></tr>没有登陆到正确的位置。似乎还有一个无关紧要的附加内容。有人可以向我解释为什么会这样吗？

<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方法（如append()）操纵浏览器的DOM树 DOM包含完整的 HTML元素。你不能把一半的标签。

相反，您可以将HTML连接成一个字符串（或者，为了更好的性能，一个数组），然后立即将完整的HTML字符串放入DOM中。

使用jQuery .append构建表，产生不正确的html

1 个答案: