首頁 > 網際網路

如何使用append()方法動態追加多個元素

2019-12-12 15:58:25

jquery中的append()方法不僅支援新增一個HTML元素,而且可以同時新增多個HTML元素。下面介紹如何使用append()方法動態追加多個元素。

1

建立一個HTML檔案,命名為test.html,用於介紹如何使用append()方法動態追加多個元素。


2

在test.html頁面,使用button標籤建立一個「追加文字」的按鈕,用於點選實現追加文字。


3

給button按鈕系結onclick事件,當按鈕被點選時,執行appendText()函數來實現追加文字元素。


4

下面將使用三種方法建立要追加的html文字元素。第一種方法,以HTML建立元素,直接把HTML儲存在變數中。


5

第二種方法,使用jquery建立HTML元素,利用text()方法向p標籤物件新增文字內容。


6

第三種方法,使用DOM物件的方法來建立p元素。以上三種方法建立的元素都可以使用append()方法向頁面追加HTML元素,將上面建立的三個元素以逗號分隔的方式加入append()方法中,並向當前頁面的body追加元素。


7

在瀏覽器開啟test.html頁面,點選「追加文字」按鈕,實現向HTML頁面一次新增三個元素。效果如下:




IT145.com E-mail:sddin#qq.com