Last Updated on 2022-04-28 by Clay
最近接案時遇到了一個在網頁上動態新增元素的需求：我需要在資料庫後端撈取資料，按照資料的筆數新增同樣數量的元件顯示在 HTML 的頁面上。
為了解決這個問題，我嘗試了使用使用 JavaScript 的 appendChild() 在特定的 HTML 位置上新增元件，順利地完成我的需求。
以下便是程式碼與稍微的解釋，主要是以勾選元件 checkbox 來做範例。
範例程式碼
眾所皆知，勾選欄位是由 checkbox 以及 label 兩個元件所組成。前者是勾選框（與勾選後可能要執行的函式），後者則是顯示說明的元件。
以下是個由 HTML 佈局加上 JavaScript 所執行的動態新增欄位範例程式碼。我一開始便設定了擁有特定 id 的 div 區塊，並使用一個按鈕來觸發自製的 add() 函式。
在 add() 函式中，先是透過 id 取得了想要新增的 div 位置，再透過 createElement 來創造想要的元素（就是 checkbox 以及 label），最後再使用 appendChild() 將這些元素加入 div 區塊裡。
不過展示的效果可能不是很好看，但為了程式碼的精簡，就先這樣吧！
Output:
References
- https://stackoverflow.com/questions/11017509/add-onclick-event-to-document-createelementth
- https://www.w3schools.com/jsref/met_node_appendchild.asp
- https://stackoverflow.com/questions/6142806/how-to-use-the-addchild-method-of-javascript-to-add-a-node-to-my-div