jQuery添加刪除DOM元素方法詳解

更新時(shí)間：2016年01月18日 10:42:21 作者：杯子

這篇文章主要介紹了jQuery添加刪除DOM元素方法,結(jié)合實(shí)例形式較為詳細(xì)的分析講述了jQuery關(guān)于DOM元素節(jié)點(diǎn)的添加與刪除相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例分析了jQuery添加刪除DOM元素的方法。分享給大家供大家參考，具體如下：

介紹

DOM是Document Object Modeule的縮寫，一般來(lái)說(shuō)，DOM操作分成3個(gè)方面。

1、DOM Core

DOM Core并不專屬于javascript，任何一種支持DOM的程序設(shè)計(jì)語(yǔ)言都可以使用它，用途也遠(yuǎn)不止僅限于網(wǎng)頁(yè)，也可以用來(lái)處理任何一種使用標(biāo)記語(yǔ)言編寫出來(lái)的文檔，如XML。
例如：document,getElementsByTagName("form");//使用DOM Core來(lái)獲取表單對(duì)象的方法。

2、HTML-DOM

在使用Javascript和DOM為HTML文件編寫腳本時(shí)，有許多屬于HTML-DOM的屬性，HTML-DOM的出現(xiàn)甚至比DOM Core還要早，他提供了一些更簡(jiǎn)明的記號(hào)來(lái)描述各種HTML元素的屬性。
例如：

復(fù)制代碼代碼如下:

document.forms //HTML-DOM提供了一個(gè)forms對(duì)象。

PS:可以看出，獲取對(duì)象、屬性即可以用DOM Core來(lái)實(shí)現(xiàn)民，也可以用HTML-DOM實(shí)現(xiàn)。

3、CSS-DOM

CSS-DOM是針對(duì)CSS的操作,在javascript中，CSS-DOM主要的作用是獲取和設(shè)置style對(duì)象的各種屬性，由此達(dá)到網(wǎng)頁(yè)呈現(xiàn)出各種不同的效果.

例如：

復(fù)制代碼代碼如下:

element.style.color="red";//設(shè)置某元素的字體顏色的方法。

常用方法

1.查找元素節(jié)點(diǎn)

復(fù)制代碼代碼如下:

var $li = $("ul li:eq(0)");//獲取ul標(biāo)記下的第一個(gè)li,也可以寫成 $("#ulID li:eq(0)");

2.查找元素屬性

利用jquery的attr()方法來(lái)獲取元素的各種屬性的值，attr()方法的參數(shù)可以是一個(gè)，也可以是兩個(gè)。

當(dāng)參數(shù)是一個(gè)時(shí)，則是要查詢的屬性名稱。

當(dāng)參數(shù)是兩個(gè)時(shí)，則可以設(shè)置屬性的值。

alert($("#id").attr("title")); //輸出元素的title屬性.一個(gè)參數(shù)
$("#id").attr("title","改變title值"); //改變?cè)氐膖itle屬性值.二個(gè)參數(shù)

3.添加元素節(jié)點(diǎn)

$(html) 簡(jiǎn)單說(shuō)明一下$(html)方法會(huì)根據(jù)傳入的html標(biāo)記字符串創(chuàng)建一個(gè)dom對(duì)象，并將這個(gè)dom對(duì)象包裝成一個(gè)jquery對(duì)象返回，總之就是把標(biāo)記所有html代碼都放到$()工廠里面就行了！

例：

var $htmlLi = $(" <li title='香蕉'>香蕉</li>"); //創(chuàng)建DOM對(duì)象
var $ul = $("ul");  //獲取UL對(duì)象
$ul.append($htmlLi); //將$htmlLi追加到$ul元素的li列表

下面列出部分插入節(jié)點(diǎn)的方法

方法	描述	示例
Append()	向每個(gè)匹配的元素內(nèi)追加內(nèi)容	HTML代碼 <ul></ul> JQuery代碼 $(“ul”).append(“<li>AA</li>”); 結(jié)果 <ul> <li>AA</li> </ul>
appendTo()	該方法和Append()相反，a.Append(b)是將b追加到a中，而appendTo()是將b追求到a中	HTML代碼 <ul></ul> JQuery代碼 $ (“<li>AA</li>”).appendTo (“ul”).; 結(jié)果 <ul> <li>AA</li> </ul>
Prepend()	向每個(gè)匹配的元素內(nèi)部前置內(nèi)容	HTML代碼 <p>哈哈</p> JQuery代碼 $(“p”).prepend(“<b>ABC</b>”); 結(jié)果 <p><b>ABC</b>哈哈</p>
prependTo()	該方法和Prepend()相反，a. Prepend (b)是將b前置到a中，而prependTo ()是將b前置到a中	HTML代碼 <p>哈哈</p> JQuery代碼 $(“<b>ABC</b>”).prependTo.(“p”); 結(jié)果 <p><b>ABC</b>哈哈</p>
After()	在每個(gè)匹配的元素之后插入內(nèi)容，是之后	HTML代碼 <p>AAA</p> JQuery代碼 $(“p”).After(“<b>cc</b>”); 結(jié)果 <p>AAA</p><b>cc</b>
insertAfter()	和After()相反	HTML代碼 <p>AAA</p> JQuery代碼 $ (“<b>cc</b>”).After(“p”); 結(jié)果 <p>AAA</p><b>cc</b>
Before()	在每個(gè)匹配的元素之前插入內(nèi)容	HTML代碼 <p>AAA</p> JQuery代碼 $(“p”). Before (“<b>cc</b>”); 結(jié)果 <b>cc</b><p>AAA</p>
insertBefore()	和Before()相反	HTML代碼 <p>AAA</p> JQuery代碼 $ (“<b>cc</b>”). insertBefore (“p”); 結(jié)果 <b>cc</b><p>AAA</p>

好了，不要齋看，自己動(dòng)手試試吧:)

4.刪除元素節(jié)點(diǎn)

由于我們需要經(jīng)常動(dòng)態(tài)去改變DOM元素，因此Jquery提供了兩種刪除節(jié)點(diǎn)的方法，即remove()和empty();

4.1 remove()方法

$("p").remove();// 我們可以獲取到要?jiǎng)h除的元素，然后調(diào)用remove()方法
$("ul li:eq(0)").remove().appendTo("ul");// 刪除ul下面的第一個(gè)li標(biāo)記，然后再把刪除的li標(biāo)記重新加到ul里面，remove()方法返回刪除元素的引用，這時(shí)你可以繼續(xù)使用
$("ul li").remove("li[title!=ABC]");//remove可以接受通過(guò)參數(shù)來(lái)選擇性的刪除符合條件的元素;

4.2 empty()方法

嚴(yán)格來(lái)講，empty()方法并不是刪除元素，而是清空

例：

HTML代碼：