Skip to content

[HTML][JS] 動態地新增元素(以 checkbox 為例)

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


Read More

Leave a Reply