jQuery 添加元素和刪除元素的方法
添加新的 HTML 內(nèi)容
我們將學(xué)習(xí)用于添加新內(nèi)容的四個(gè) jQuery 方法:
- append() - 在被選元素的結(jié)尾插入內(nèi)容
- prepend() - 在被選元素的開頭插入內(nèi)容
- after() - 在被選元素之后插入內(nèi)容
- before() - 在被選元素之前插入內(nèi)容
jQuery append() 方法
jQuery append() 方法在被選元素的結(jié)尾插入內(nèi)容(仍然在該元素的內(nèi)部)。
$("p").append("追加文本");
jQuery prepend() 方法
jQuery prepend() 方法在被選元素的開頭插入內(nèi)容。
$("p").prepend("在開頭追加文本");
通過 append() 和 prepend() 方法添加若干新元素
在上面的例子中,我們只在被選元素的開頭/結(jié)尾插入文本/HTML。
不過,append() 和 prepend() 方法能夠通過參數(shù)接收無限數(shù)量的新元素??梢酝ㄟ^ jQuery 來生成文本/HTML(就像上面的例子那樣),或者通過 JavaScript 代碼和 DOM 元素。
在下面的例子中,我們創(chuàng)建若干個(gè)新元素。這些元素可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創(chuàng)建。然后我們通過 append() 方法把這些新元素追加到文本中(對 prepend() 同樣有效):
function appendText() { var txt1="<p>文本。</p>"; // 使用 HTML 標(biāo)簽創(chuàng)建文本 var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 創(chuàng)建文本 var txt3=document.createElement("p"); txt3.innerHTML="文本。"; // 使用 DOM 創(chuàng)建文本 text with DOM $("body").append(txt1,txt2,txt3); // 追加新元素 }
jQuery after() 和 before() 方法
jQuery after() 方法在被選元素之后插入內(nèi)容。
jQuery before() 方法在被選元素之前插入內(nèi)容。
$("img").after("在后面添加文本"); $("img").before("在前面添加文本");
通過 after() 和 before() 方法添加若干新元素
after() 和 before() 方法能夠通過參數(shù)接收無限數(shù)量的新元素。可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創(chuàng)建新元素。
在下面的例子中,我們創(chuàng)建若干新元素。這些元素可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創(chuàng)建。然后我們通過 after() 方法把這些新元素插到文本中(對 before() 同樣有效):
function afterText() { var txt1="<b>I </b>"; // 使用 HTML 創(chuàng)建元素 var txt2=$("<i></i>").text("love "); // 使用 jQuery 創(chuàng)建元素 var txt3=document.createElement("big"); // 使用 DOM 創(chuàng)建元素 txt3.innerHTML="jQuery!"; $("img").after(txt1,txt2,txt3); // 在圖片后添加文本 }
刪除元素/內(nèi)容
如需刪除元素和內(nèi)容,一般可使用以下兩個(gè) jQuery 方法:
- remove() - 刪除被選元素(及其子元素)
- empty() - 從被選元素中刪除子元素
jQuery remove() 方法
jQuery remove() 方法刪除被選元素及其子元素。
$("#div1").remove();
jQuery empty() 方法
jQuery empty() 方法刪除被選元素的子元素。
$("#div1").empty();
過濾被刪除的元素
jQuery remove() 方法也可接受一個(gè)參數(shù),允許您對被刪元素進(jìn)行過濾。
該參數(shù)可以是任何 jQuery 選擇器的語法。
下面的例子刪除 class="italic" 的所有 <p> 元素:
$("p").remove(".italic");
以上就是jQuery 添加元素和刪除元素的方法的詳細(xì)內(nèi)容,更多關(guān)于jQuery 添加元素和刪除元素的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
jquery實(shí)現(xiàn)點(diǎn)擊彈出可放大居中及關(guān)閉的對話框(附demo源碼下載)
這篇文章主要介紹了jquery實(shí)現(xiàn)點(diǎn)擊彈出可放大居中及關(guān)閉的對話框,具有可拖動、放大、居中及關(guān)閉等功能,提供了2種對話框模式供讀者選擇,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-05-05jquery.hotkeys監(jiān)聽鍵盤按下事件keydown插件
jquery.hotkeys就是網(wǎng)頁是監(jiān)聽用戶按鍵要用到的jquery庫,這里簡單介紹下使用方法,需要的朋友可以參考下2014-05-05jquery實(shí)現(xiàn)倒計(jì)時(shí)代碼分享
最近做的項(xiàng)目,需要倒計(jì)時(shí),翻了翻資料,寫了出來,分享給大家,歡迎拍磚,jquery庫自己記得引用哈2014-06-06JQuery Ajax動態(tài)加載Table數(shù)據(jù)的實(shí)例講解
今天小編就為大家分享一篇JQuery Ajax動態(tài)加載Table數(shù)據(jù)的實(shí)例講解,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08jQuery與getJson結(jié)合的用法實(shí)例
這篇文章主要介紹了jQuery與getJson結(jié)合的用法,實(shí)例分析了jquery解析json數(shù)據(jù)及數(shù)組遍歷的相關(guān)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08jquery 驗(yàn)證用戶名是否重復(fù)代碼實(shí)例
這篇文章主要介紹了jquery驗(yàn)證用戶名是否重復(fù),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05使用jquery組件qrcode生成二維碼及應(yīng)用指南
這篇文章主要介紹了使用jquery組件qrcode生成二維碼及應(yīng)用指南,非常全面實(shí)用,需要的朋友可以參考下2015-02-02