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