jQuery中append()方法用法實(shí)例
更新時(shí)間：2014年12月25日 10:24:04 投稿：shichen2014
這篇文章主要介紹了jQuery中append()方法用法,以實(shí)例形式較為詳細(xì)的分析了append()方法的功能、定義與使用技巧,并對(duì)比分析了與text()方法的區(qū)別,需要的朋友可以參考下
本文實(shí)例講述了jQuery中append()方法用法。分享給大家供大家參考。具體分析如下：
此方法可向所有匹配元素的內(nèi)部的尾部追加HTML內(nèi)容。
特別說(shuō)明:
此方法是追加內(nèi)容，并不會(huì)刪除之前的內(nèi)容。
html內(nèi)容就是內(nèi)容中可以包含html標(biāo)簽，并且能夠被瀏覽器渲染。
文本內(nèi)容是先將內(nèi)容中的html預(yù)定義字符轉(zhuǎn)換成html字符實(shí)體，這樣html標(biāo)簽就不會(huì)被渲染。
語(yǔ)法結(jié)構(gòu):
復(fù)制代碼 代碼如下:
$(selector).append(content)
實(shí)例代碼:
實(shí)例一:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://m.fzitv.net/" />
<title>腳本之家</title>
<style type="text/css">
div
{
height:150px;
width:150px;
background-color:green;
margin-top:10px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").append("<b>好好學(xué)習(xí)</b>");
})
</script>
</head>
<body>
<div>原來(lái)內(nèi)容</div>
</body>
</html>[/size]
[size=2]
在原來(lái)div內(nèi)容的后面追加內(nèi)容。
實(shí)例二:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://m.fzitv.net/" />
<title>腳本之家</title>
<style type="text/css">
div
{
height:150px;
width:150px;
background-color:green;
margin-top:10px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$(".html").append("<b>好好學(xué)習(xí)</b>");
$(".text").text("<b>好好學(xué)習(xí)</b>");
})
})
</script>
</head>
<body>
<div class="html"></div>
<div class="text"></div>
<button>點(diǎn)擊查看效果</button>
</body>
</html>
通過(guò)此實(shí)例大家可以觀察一下HTML內(nèi)容和文本內(nèi)容的區(qū)別。
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- 關(guān)于jquery append() html時(shí)的小問(wèn)題的解決方法
- jQuery中append、insertBefore、after與insertAfter的簡(jiǎn)單用法與注意事項(xiàng)
- jquery使用append(content)方法注意事項(xiàng)分享
- jQuery 追加元素的方法如append、prepend、before
- jquery append()方法與html()方法的區(qū)別及使用介紹
- jquery中append()與appendto()用法分析
- jQuery中append()方法用法實(shí)例
- jQuery中appendTo()方法用法實(shí)例
- 解決Jquery向頁(yè)面append新元素之后事件的綁定問(wèn)題
相關(guān)文章
JSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允許請(qǐng)求當(dāng)前源（域名、協(xié)議、端口）的資源。2011-06-06
jQuery插件echarts設(shè)置折線圖中折線線條顏色和折線點(diǎn)顏色的方法
這篇文章主要介紹了jQuery插件echarts設(shè)置折線圖中折線線條顏色和折線點(diǎn)顏色的方法,結(jié)合實(shí)例形式分析了jQuery圖表插件echarts設(shè)置折線圖的相關(guān)操作技巧,需要的朋友可以參考下2017-03-03
基于JQuery的實(shí)現(xiàn)圖片輪播效果(焦點(diǎn)圖)
用JQuery操作DOM確實(shí)很方便，并且JQuery提供了非常人性化的API應(yīng)付我們的各種需求，其中選擇器在此示例-JQuery實(shí)現(xiàn)圖片輪播效果上體現(xiàn)的尤為出色。大大簡(jiǎn)化了js的代碼。2010-09-09
jQuery中setTimeout的幾種使用方法小結(jié)
jQuery 中 setTimeout/setInterval 不能像在原生態(tài) javascript 中那樣使用, 否則會(huì)報(bào)錯(cuò).2013-04-04
可能是個(gè)人認(rèn)識(shí)能力有限，一直認(rèn)為僅僅靠html是很難展現(xiàn)稍具動(dòng)態(tài)的圖表的，但是在看到j(luò)qPlot之后，我的認(rèn)識(shí)有了很大改變，jqplpt——基于HTML的圖表展示插件，而且不生成圖片，最可貴的是能生成類(lèi)似flex的數(shù)據(jù)動(dòng)態(tài)提示以及動(dòng)態(tài)改變數(shù)據(jù)展示范圍等等。2009-07-07
jQuery ajax方法傳遞中文時(shí)出現(xiàn)中文亂碼的解決方法
這篇文章主要介紹了jQuery ajax方法傳遞中文時(shí)出現(xiàn)中文亂碼的解決方法,涉及jQuery操作ajax的相關(guān)參數(shù)及編碼的設(shè)置方法與注意事項(xiàng),需要的朋友可以參考下2016-07-07
JQuery動(dòng)畫(huà)和停止動(dòng)畫(huà)實(shí)例代碼
實(shí)例中涉及到使用動(dòng)畫(huà)方法animate，動(dòng)畫(huà)停止方法Stop，其他詳情在示例代碼中都有注釋。2013-03-03
本文推薦10個(gè)應(yīng)該收藏的、實(shí)現(xiàn)功能很棒的jQuery代碼片段，需要的朋友可以參考下2015-09-09
JQuery中節(jié)點(diǎn)遍歷方法實(shí)例
這篇文章主要介紹了JQuery中節(jié)點(diǎn)遍歷方法,實(shí)例分析了jQuery遍歷節(jié)點(diǎn)的技巧,需要的朋友可以參考下2015-05-05
jQuery密碼強(qiáng)度驗(yàn)證控件使用詳解
這篇文章主要為大家詳細(xì)介紹了jQuery密碼強(qiáng)度驗(yàn)證控件使用的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01