首頁 > 網際網路

js如何在元素前新增元素

2019-12-11 21:56:10

js是瀏覽器用戶端執行的語言,那麼要如何通過js在元素前面新增新的元素呢?

本文介紹兩種實現方式(jquery方式程式碼更簡潔易懂):

1、原生JS方式

2、Jquery方式

1

建立html頁面

     1)開啟記事本,輸入如下截圖所示的html程式碼

     2)將檔案儲存為html結尾的檔案,例如JsTest.html


2

執行頁面

     1)上一步儲存完成後,雙擊檔案即可使用預設瀏覽器執行頁面

     2)如果想使用指定瀏覽器執行,右鍵檔案,選擇【開啟方式】-> 挑選任一已經安裝的瀏覽器即可



3

原生JS方式,詳細程式碼與注釋見截圖

     主要使用的js方法: 父元素.insertBefore(新元素, 目標元素) 


4

原生JS方式,執行效果如下


5

Jquery方式,必須要引入jquery檔案才能使用,此處將jquery下載下來放到Content資料夾中,新的目錄結構如下

     -- Content

         -- jquery-1.11.3.min.js

     -- JsTest.html



6

Jquery方式,詳細程式碼與相關注釋見截圖

     主要使用的jquery方法:before(html文字內容即可)


7

Jquery方式,執行效果如下



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