jQuery 追加元素的方法如append、prepend、before
更新時間：2014年01月16日 17:16:52 投稿：whsnow
jQuery - 追加元素的方法有很多如append、prepend、before等等，下面為大家詳細介紹下
1.jQuery append() 方法
jQuery append() 方法在被選元素的結(jié)尾插入內(nèi)容。
實例
$("p").append("Some appended text.");
2.jQuery prepend() 方法
jQuery prepend() 方法在被選元素的開頭插入內(nèi)容。
實例
$("p").prepend("Some prepended text.");
3、after() 和 before() 方法
jQuery after() 方法在被選元素之后插入內(nèi)容。
jQuery before() 方法在被選元素之前插入內(nèi)容。
實例
$("img").after("Some text after");
$("img").before("Some text before");
下面腳本之家小編給補充一下
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>第一個li標簽</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>
運行后效果圖：
html結(jié)構(gòu)圖
您可能感興趣的文章:
相關文章
這篇文章主要介紹了jQuery實現(xiàn)的仿select功能代碼,使用jquery.select.js插件實現(xiàn)select選擇功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了jQuery Ajax通用js封裝的實例代碼，非常不錯，具有參考借鑒價值，感興趣的朋友一起學習吧2016-06-06
這篇文章主要為大家詳細介紹了jQuery彈框插件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
懶加載實現(xiàn)的分頁&&網(wǎng)站footer自適應
本文主要介紹了wap手機端懶加載分頁，web電腦端懶加載分頁以及web電腦端footer底部固定。具有很好的參考價值，下面就跟著小編一起來看下吧2016-12-12
加載等待效果想必大家都有見到過吧，其實很簡單，在本文將為大家介紹下使用jquery是如何實現(xiàn)的，感興趣的朋友可以參考下2013-09-09
下面小編就為大家?guī)硪黄钊肜斫鈐Query中的事件冒泡。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
在京東商城瀏覽時, 會發(fā)現(xiàn)產(chǎn)品圖片只顯示了一屏, 當頁面向下滾動時下面的產(chǎn)品圖片才逐漸加載.2010-06-06
如果元素是可見的，切換為隱藏的；如果元素是隱藏的，切換為可見的。2009-11-11
這篇文章主要介紹了jQuery 取值、賦值的基本方法,需要的朋友可以參考下2014-03-03
jquery其實本身的事件機制就很完善了，包括了單擊，雙擊，鼠標移入，鼠標移出等。但是卻少了一個做事件。就是鼠標右擊事件。當然大家也是直接用偵聽鼠標按下事件，然后通過if來判斷執(zhí)行相應的函數(shù)。造成鼠標右擊事件的效果2011-12-12