快捷導(dǎo)航

jQuery 追加元素的方法如append、prepend、before

更新時(shí)間：2014年01月16日 17:16:52 投稿：whsnow

jQuery - 追加元素的方法有很多如append、prepend、before等等，下面為大家詳細(xì)介紹下

1.jQuery append() 方法

jQuery append() 方法在被選元素的結(jié)尾插入內(nèi)容。

實(shí)例

$("p").append("Some appended text.");

2.jQuery prepend() 方法

jQuery prepend() 方法在被選元素的開頭插入內(nèi)容。
實(shí)例

$("p").prepend("Some prepended text.");

3、after() 和 before() 方法

jQuery after() 方法在被選元素之后插入內(nèi)容。
jQuery before() 方法在被選元素之前插入內(nèi)容。
實(shí)例

$("img").after("Some text after"); 
$("img").before("Some text before");

下面腳本之家小編給補(bǔ)充一下

append() 方法在被選元素的結(jié)尾插入內(nèi)容。

prepend() 方法在被選元素的開頭插入內(nèi)容。

after() 方法在被選元素之后插入內(nèi)容。

before() 方法在被選元素之前插入內(nèi)容。

演示代碼：

<script type="text/javascript" src="http://common.jb51.net/jslib/jquery/jquery.min.js"></script>
<div class="testdiv">
 <ul>
  <li>第一個(gè)li標(biāo)簽</li>
 </ul>
</div>

<script>

 //append
 $('.testdiv ul').append('<li>append 插入的li</li>');
 //prepend
 $('.testdiv ul').prepend('<li>prepend 插入的li</li>');
 //after
 $('.testdiv ul').after('<li>after 插入的li</li>');
 //before
 $('.testdiv ul').before('<li>before 插入的li</li>');

</script>

運(yùn)行后效果圖：

html結(jié)構(gòu)圖

您可能感興趣的文章:

相關(guān)文章

jQuery實(shí)現(xiàn)的仿select功能代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的仿select功能代碼,使用jquery.select.js插件實(shí)現(xiàn)select選擇功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08
淺析jQuery Ajax通用js封裝
這篇文章主要介紹了jQuery Ajax通用js封裝的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧
2016-06-06
jQuery彈框插件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了jQuery彈框插件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-05-05
懶加載實(shí)現(xiàn)的分頁&&網(wǎng)站footer自適應(yīng)
本文主要介紹了wap手機(jī)端懶加載分頁，web電腦端懶加載分頁以及web電腦端footer底部固定。具有很好的參考價(jià)值，下面就跟著小編一起來看下吧
2016-12-12
jquery實(shí)現(xiàn)加載等待效果示例
加載等待效果想必大家都有見到過吧，其實(shí)很簡單，在本文將為大家介紹下使用jquery是如何實(shí)現(xiàn)的，感興趣的朋友可以參考下
2013-09-09
深入理解jQuery中的事件冒泡
下面小編就為大家?guī)硪黄钊肜斫鈐Query中的事件冒泡。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-05-05
基于jquery的圖片懶加載js
在京東商城瀏覽時(shí), 會(huì)發(fā)現(xiàn)產(chǎn)品圖片只顯示了一屏, 當(dāng)頁面向下滾動(dòng)時(shí)下面的產(chǎn)品圖片才逐漸加載.
2010-06-06
jQuery toggle()設(shè)置CSS樣式
如果元素是可見的，切換為隱藏的；如果元素是隱藏的，切換為可見的。
2009-11-11
jQuery 取值、賦值的基本方法整理
這篇文章主要介紹了jQuery 取值、賦值的基本方法,需要的朋友可以參考下
2014-03-03
jquery事件機(jī)制擴(kuò)展插件 jquery鼠標(biāo)右鍵事件
jquery其實(shí)本身的事件機(jī)制就很完善了，包括了單擊，雙擊，鼠標(biāo)移入，鼠標(biāo)移出等。但是卻少了一個(gè)做事件。就是鼠標(biāo)右擊事件。當(dāng)然大家也是直接用偵聽鼠標(biāo)按下事件，然后通過if來判斷執(zhí)行相應(yīng)的函數(shù)。造成鼠標(biāo)右擊事件的效果
2011-12-12