IT培訓-高端面授IT培訓機構
          云和教育:云和數據集團高端IT職業(yè)教育品牌
          • 國家級
            全民數字素養(yǎng)與技能培訓基地
          • 河南省
            第一批產教融合型企業(yè)建設培育單位
          • 鄭州市
            數字技能人才(碼農)培養(yǎng)評價聯(lián)盟

          jQuery怎樣添加元素和刪除元素?

          • 發(fā)布時間:
            2023-01-11
          • 版權所有:
            云和教育
          • 分享:

          添加元素

          jQuery 提供了添加元素的方法,用來為目標元素添加某個元素。添加的方式有兩種,分別是內部添加和外部添加,下面我們分別進行講解。

          1.內部添加

          內部添加的方式可以實現(xiàn)在元素內部添加元素,并且可以放到內部的最后面或者最前面內部添加主要通過 append()和 prepend()方法來實現(xiàn),下面我們通過代碼進行演示:

          var li = $("<li>我是后來創(chuàng)建li</li>");
          $("ul").append(li);           //內部添加并且放到內部的最后面
          $("ul").prepend(li);          //內部添加并且放到內部的最前面

          上述代碼中,通過$(“ul”)獲取到頁面中的ul元素并調用append(li)將li元素添加到ul中append()是把元素添加到匹配元素內部的最后面,而prepend()是把元素添加到匹配元素內部的最前面。

          2. 外部添加

          外部添加就是把元素放到目標元素的后面或者前面,通過after()和before()方法來實現(xiàn)。下面我們通過代碼進行演示。

          Var div = $("<div>我是后來創(chuàng)建的div</div>");
          $(",test").after(div);                  // div放入到目標元素的后面
          $(n.test").before(div);                 // div放人到目標元素的前面

          上述代碼中,在類名為“test”的元素后面和前面分別插入div元素。其中after()表示在目標元素的后面插人div元素,而before()表示在目標元素的前面插人div元素。

          刪除元素

          刪除元素分為刪除匹配的元素本身、刪除匹配的元素里面的子節(jié)點兩種情況,用到的方法如表 1所示。
          1668501694160_說明.png

          為了讀者更好地理解jQuery 中節(jié)點刪除的操作,下面我們通過代碼進行演示

          $("ul") .remove ();                  //刪除匹配的元素
          $("ul").empty();                     //刪除匹配的元素里面的子節(jié)點

          上述代碼中,empty0方法僅能刪除匹配元素的文本內容,而元素節(jié)點依然存在remove()方法則可以同時刪除匹配元素本身和文本內容。因此,在開發(fā)時要根據實際的需求選擇合適的方法進行元素刪除操作。

          利用 html()方法可以修改元素的內容,如果在參數中傳入一個空字符串,也可以實現(xiàn)刪除元素子節(jié)點的效果,如”$(“ul”).html(“)”。