如何使用jQuery中的方法新增元素並設定對應樣式

2019-12-12 03:41:56

在使用jQuery API時，可能會用到將一個元素新增到另一個元素內，並設定樣式進行顯示。其中，add()方法就是這種，可以將元素新增到元素中，但是元素不顯示。下面利用範例說明，操作如下：

第一步，雙擊開啟HBuilder並新建一個靜態頁面，在頁面中引入jquery檔案，如下圖所示：

第二步，在<body></body>標籤內，插入一個div標籤並在其中插入一個無序列表，如下圖所示：

第三步，接著在jQuery初始化函數中，利用jquery each函數遍歷迴圈ul li，如下圖所示：

第四步，儲存程式碼並在瀏覽器上檢視頁面顯示的效果，可以發現只有幾個無序列表項的點，如下圖所示：

第五步，再次新增樣式程式碼，並使用類選擇器包裹，然後使用addClass方法新增類樣式，如下圖所示：

第六步，再次儲存程式碼並檢視頁面顯示效果，可以發現背景顏色改變了，但是程式碼中沒有新增a標籤，如下圖所示：