Jquery附加现有元素

Question

Jquery .append()方法： ＆＃34;将参数指定的内容插入匹配元素集中每个元素的结尾（!!!）。＆＃34; Api

首先，添加到END（ok）：

＆＃13;

＆＃13;

	var tbody = $('tbody');
	var row = $('<tr><td>4</td></tr>');

		tbody.append(row);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
	<tbody>
		
	<tr><td>1</td></tr>
	<tr><td>2</td></tr>
	<tr><td>3</td></tr>

	</tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

其次，替换所有内容（不添加到结尾）：

＆＃13;

＆＃13;

	var tbody = $('tbody');
	var row = tbody.children('tr:first');

		tbody.append(row);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
	<tbody>
		
	<tr><td>1</td></tr>
	<tr><td>2</td></tr>
	<tr><td>3</td></tr>

	</tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

如果target.append（element）应该将元素添加到目标的末尾，则第二个示例应该输出1 2 3 1，而不是2 3 1。

问题：为什么第二个例子输出2 3 1？

Answer 1

append在添加元素之前从dom中删除元素。如果要保留原始元素，则需要先将其克隆，然后附加克隆。

Answer 2

您应该为tr

添加克隆

＆＃13;

＆＃13;

var tbody = $('tbody');
var row = tbody.children('tr:first').clone();
tbody.append(row);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
	<tbody>
		
	<tr><td>1</td></tr>
	<tr><td>2</td></tr>
	<tr><td>3</td></tr>

	</tbody>
</table>

＆＃13;

＆＃13;

＆＃13;