jQuery的元素操作：添加元素和刪除元素

添加元素

jQuery 提供了添加元素的方法，用來為目標(biāo)元素添加某個(gè)元素。添加的方式有兩種，分別是內(nèi)部添加和外部添加，下面我們分別進(jìn)行講解。

1.內(nèi)部添加

內(nèi)部添加的方式可以實(shí)現(xiàn)在元素內(nèi)部添加元素，并且可以放到內(nèi)部的最后面或者最前面內(nèi)部添加主要通過 append()和 prepend()方法來實(shí)現(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)部的最前面。

2. 外部添加

外部添加就是把元素放到目標(biāo)元素的后面或者前面，通過after()和before()方法來實(shí)現(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é)點(diǎn)兩種情況，用到的方法如表 1所示。

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

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

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

利用 html()方法可以修改元素的內(nèi)容，如果在參數(shù)中傳入一個(gè)空字符串，也可以實(shí)現(xiàn)刪除元素子節(jié)點(diǎn)的效果，如"$("ul").html(")"。