jQuery使用prepend()方法在元素前添加內(nèi)容用法實例

更新時間：2015年03月26日 16:06:29 作者：上大王

這篇文章主要介紹了jQuery使用prepend()方法在元素前添加內(nèi)容的方法,實例分析了prepend方法追加內(nèi)容的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了jQuery使用prepend()方法在元素前添加內(nèi)容的用法。分享給大家供大家參考。具體分析如下：

下面的代碼可實現(xiàn)在文本前和列表前添加新的元素

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 $("#btn1").click(function(){
  $("p").prepend("<b>Prepended text</b>. ");
 });
 $("#btn2").click(function(){
  $("ol").prepend("<li>Prepended item</li>");
 });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">Prepend text</button>
<button id="btn2">Prepend list item</button>
</body>
</html>

希望本文所述對大家的jQuery程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

Javascript 鏈式調(diào)用實現(xiàn)代碼(參考jquery)
謂的鏈式調(diào)用無非是一個語法技巧而已，我就學(xué)Jquery寫了一個粗淺的庫。
2010-05-05
jQuery入門知識簡介
seektanjQuery是最近比較火的一個JavaScript庫，從del.icio.us/上相關(guān)的收藏可見一斑。
2010-03-03
基于jQuery封裝的分頁組件
這篇文章主要為大家詳細介紹了基于jQuery封裝的分頁組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
淺談jquery上下滑動的注意事項
下面小編就為大家?guī)硪黄猨query上下滑動的注意事項。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-10-10
淺談JSON和JSONP區(qū)別及jQuery的ajax jsonp的使用
文章從JSON和JSONP區(qū)別開始講起，用實例來對比他們之間的不同之處，然后詳細講解了jQuery中的ajax jsonp的使用并給出了示例及詳細參數(shù)說明。這里推薦給大家，希望對小伙伴能有所幫助
2014-11-11
Spring MVC中Ajax實現(xiàn)二級聯(lián)動的簡單實例
下面小編就為大家?guī)硪黄猄pring MVC中Ajax實現(xiàn)二級聯(lián)動的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-07-07
用jQuery向div中添加Html文本內(nèi)容的簡單實現(xiàn)
下面小編就為大家?guī)硪黄胘Query向div中添加Html文本內(nèi)容的簡單實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-07-07
jQuey將序列化對象在前臺顯示地實現(xiàn)代碼(方法總結(jié))
本文給大家分享jQuey將序列化對象在前臺顯示地的幾種方式，非常不錯，具有參考借鑒價值，需要的朋友一起看看吧
2016-12-12
jQuery實現(xiàn)彈窗下底部頁面禁止滑動效果
在項目開發(fā)過程中，經(jīng)常會遇到帶有彈窗的頁面，尤其是在移動端。下面通過本文給大家分享jQuery實現(xiàn)彈窗下底部頁面禁止滑動效果，需要的朋友參考下吧
2017-12-12
基于jquery的direction圖片漸變動畫效果
這個插件的制作用到j(luò)query的animate,fadeIn,fadeTo等動畫透明度之類的知識，對css的控制樣式也是很重要的
2010-05-05