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

讓最後兩個添加節點變爲複製節點添加。