Javascript 为什么.append()会替换下面代码中tbody的内容?

Javascript 为什么.append()会替换下面代码中tbody的内容?,javascript,html-table,append,Javascript,Html Table,Append,我有一个简单的html文件,它只包含一个表 <table> <thead> <tr> <th>Title</th> <th>Duration</th> <th>Date</th> </tr> </thead> <tbody>

我有一个简单的html文件,它只包含一个表

<table>
    <thead>
        <tr>
            <th>Title</th>
            <th>Duration</th>
            <th>Date</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Animals</td>
            <td>6:40</td>
            <td>2005-12-21</td>
        </tr>
        <tr>
            <td>Deer</td>
            <td>6:24</td>
            <td>2014-02-28</td>
        </tr>
        <tr>
            <td>Ghost</td>
            <td>11:40</td>
            <td>2012-04-10</td>
        </tr>
        <tr>
            <td>Wagons</td>
            <td>21:40</td>
            <td>2007-04-12</td>
        </tr>
    </tbody>
</table>
输出如下:

+---------+----------+------------+
| Title   | Duration | Date       |
+---------+----------+------------+
| Wagons  | 21:40    | 2007-04-12 |
| Ghost   | 11:40    | 2012-04-10 |
| Deer    | 6:24     | 2014-02-28 |
| Animals | 6:40     | 2005-12-21 |
+---------+----------+------------+
然而,下表是我所期望的

+---------+----------+------------+
| Title   | Duration | Date       |
+---------+----------+------------+
| Animals | 6:40     | 2005-12-21 |
| Deer    | 6:24     | 2014-02-28 |
| Ghost   | 11:40    | 2012-04-10 |
| Wagons  | 21:40    | 2007-04-12 |
| Wagons  | 21:40    | 2007-04-12 |
| Ghost   | 11:40    | 2012-04-10 |
| Deer    | 6:24     | 2014-02-28 |
| Animals | 6:40     | 2005-12-21 |
+---------+----------+------------+
有人能解释一下为什么要替换tbody的内容,而不仅仅是增加行数吗?

如果您想复制,请使用
clone()

当您附加一个元素时,它只能存在一次,并且append不会复制它
$(函数(){
变量$tbody=$(“tbody”);
var rows=$tbody.find(“tr”).clone().toArray();
$tbody.append(rows.reverse());
});

标题
期间
日期
动物
6:40
2005-12-21
鹿
6:24
2014-02-28
鬼魂
11:40
2012-04-10
运货马车
21:40
2007-04-12
如果您想复制,请使用
clone()
进行复制

当您附加一个元素时,它只能存在一次,并且append不会复制它
$(函数(){
变量$tbody=$(“tbody”);
var rows=$tbody.find(“tr”).clone().toArray();
$tbody.append(rows.reverse());
});

标题
期间
日期
动物
6:40
2005-12-21
鹿
6:24
2014-02-28
鬼魂
11:40
2012-04-10
运货马车
21:40
2007-04-12

DOM中的任何节点一次只能位于一个位置。DOM中的任何节点一次只能位于一个位置。
+---------+----------+------------+
| Title   | Duration | Date       |
+---------+----------+------------+
| Animals | 6:40     | 2005-12-21 |
| Deer    | 6:24     | 2014-02-28 |
| Ghost   | 11:40    | 2012-04-10 |
| Wagons  | 21:40    | 2007-04-12 |
| Wagons  | 21:40    | 2007-04-12 |
| Ghost   | 11:40    | 2012-04-10 |
| Deer    | 6:24     | 2014-02-28 |
| Animals | 6:40     | 2005-12-21 |
+---------+----------+------------+