更新時間:2022年11月15日16時48分 來源:傳智教育 瀏覽次數(shù):
jQuery 提供了添加元素的方法,用來為目標(biāo)元素添加某個元素。添加的方式有兩種,分別是內(nèi)部添加和外部添加,下面我們分別進(jìn)行講解。
內(nèi)部添加的方式可以實現(xiàn)在元素內(nèi)部添加元素,并且可以放到內(nèi)部的最后面或者最前面內(nèi)部添加主要通過 append()和 prepend()方法來實現(xiàn),下面我們通過代碼進(jìn)行演示:
var li = $("<li>我是后來創(chuàng)建li</li>"); $("ul").append(li); //內(nèi)部添加并且放到內(nèi)部的最后面 $("ul").prepend(li); //內(nèi)部添加并且放到內(nèi)部的最前面
上述代碼中,通過$(“ul")獲取到頁面中的ul元素并調(diào)用append(li)將li元素添加到ul中append()是把元素添加到匹配元素內(nèi)部的最后面,而prepend()是把元素添加到匹配元素內(nèi)部的最前面。
外部添加就是把元素放到目標(biāo)元素的后面或者前面,通過after()和before()方法來實現(xiàn)。下面我們通過代碼進(jìn)行演示。
Var div = $("<div>我是后來創(chuàng)建的div</div>"); $(",test").after(div); // div放入到目標(biāo)元素的后面 $(n.test").before(div); // div放人到目標(biāo)元素的前面
上述代碼中,在類名為“test”的元素后面和前面分別插入div元素。其中after()表示在目標(biāo)元素的后面插人div元素,而before()表示在目標(biāo)元素的前面插人div元素。
刪除元素分為刪除匹配的元素本身、刪除匹配的元素里面的子節(jié)點兩種情況,用到的方法如表 1所示。
為了讀者更好地理解jQuery 中節(jié)點刪除的操作,下面我們通過代碼進(jìn)行演示
$("ul") .remove (); //刪除匹配的元素 $("ul").empty(); //刪除匹配的元素里面的子節(jié)點
上述代碼中,empty0方法僅能刪除匹配元素的文本內(nèi)容,而元素節(jié)點依然存在remove()方法則可以同時刪除匹配元素本身和文本內(nèi)容。因此,在開發(fā)時要根據(jù)實際的需求選擇合適的方法進(jìn)行元素刪除操作。
利用 html()方法可以修改元素的內(nèi)容,如果在參數(shù)中傳入一個空字符串,也可以實現(xiàn)刪除元素子節(jié)點的效果,如"$("ul").html(")"。