快捷導(dǎo)航

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

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

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

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

下面的代碼可實(shí)現(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>

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

您可能感興趣的文章:

相關(guān)文章

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