for循环不能重复添加节点的坑

这是模拟后台给数据的时候发现的一个坑。

结构：

<select id="subject" class="form-control"></select>
<select id="knowledge_point" class="form-control"></select>
<select id="category" class="form-control"></select>

for (let i=0;i<10;i++) {
							let str=$("<option>str"+i+"</option>");
							$("#category").append(str);
							$("#knowledge_point").append(str);
							$("#subject").append(str);
						}

以上代码应该一眼就知道是给三个select节点分别添加十个子节点，可是最后代码只有id为subject的节点有子节点。
了解之后才知道，每一行的append其实都是执行了的，$("#category").append(str);这一行是添加，下面两行是把添加的节点移动到了自己的节点下，导致最后执行$("#subject").append(str);它是把十个节点移动到了自己身上，然后结束执行代码。

解决办法：

for (let i=0;i<10;i++) {
							let str=$("<option>str"+i+"</option>");
							$("#category").append(str);
							$("#knowledge_point").append(str.clone(true));
							$("#subject").append(str.clone(true));
						}	

让最后两个添加节点变为复制节点添加。