jquery中append()与appendto()用法分析
本文实例分析了jquery中append()与appendto()的用法。分享给大家供大家参考。具体分析如下：在jQuery的文档操作方法中，append()和appentto()方法执行的任务相同，但是两者也有区别。
1、append()方法：在被选元素的结尾（但仍在元素内部）插入指定的内容。
a、语法：复制代码
代码如下:$(selector).append(content);其中，参数content是必需的，指定要附加的内容。
b、append能够使用函数给被选元素附加内容，语法为：复制代码
代码如下:$(selector).append(function(index,html));其中，function()是必需的，参数index和html都是可选的。index表示接收选择器的index位置，html表示接收选择器的当前html。
例子：
复制代码
代码如下:<html>
<head>
<script
type="text/javascript"
src="/jquery/jquery.js"></script>
<script
type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").append("
<b>Hello
jQuery!</b>");
});
});
</script>
</head>
<body>
<p>This
is
a
paragraph.</p>
<p>This
is
another
paragraph.</p>
<button>在每个
p
元素的结尾添加内容</button>
</body>
</html>
运行结果如下：
This
is
a
paragraph.
Hello
jQuery!
This
is
another
paragraph.
Hello
jQuery!
2、appendto()方法：在被选元素的结尾（但仍在元素的内部）插入指定的内容。但不能使用函数来附加内容。
语法：复制代码
代码如下:$(content).appendto(selector);
例子：
复制代码
代码如下:<html>
<head>
<script
type="text/javascript"
src="/jquery/jquery.js"></script>
<script
type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("<b>
Hello
jQuery!</b>").appendTo("p");
});
});
</script>
</head>
<body>
<p>This
is
a
paragraph.</p>
<p>This
is
another
paragraph.</p>
<button>在每个
p
元素的结尾添加内容</button>
</body>
</html>
运行结果如下：
This
is
a
paragraph.
Hello
jQuery!
This
is
another
paragraph.
Hello
jQuery!
希望本文所述对大家的jQuery程序设计有所帮助。
绛旓細鏂规硶1锛氫娇鐢╝ppend()鏂规硶 jQuery鐨刟ppend()鏂规硶鐢ㄤ簬鍦ㄦ墍閫夊厓绱犵殑鏈熬鎻掑叆涓浜涘唴瀹广傝娉曪細鍙傛暟锛 姝ゆ柟娉曟帴鍙椾笂杩颁袱涓弬鏁 鈼忋content锛氬畠鏄繀闇鍙傛暟锛岀敤浜庢寚瀹氳鍦ㄦ墍閫夊厓绱犳湯灏炬彃鍏ョ殑鍐呭銆俢ontent鐨勫彲鑳藉兼槸HTML鍏冪礌锛宩Query瀵硅薄鍜孌OM鍏冪礌銆傗棌銆function锛坕ndex锛宧tml锛夛細瀹冩槸鍙夊弬鏁帮紝鐢ㄤ簬鎸囧畾灏嗚繑鍥炶鎻...
绛旓細append()鏂规硶鏄粯璁ゆ儏鍐典笅鏈鍚庝竴涓坊鍔犲埌鎸囧畾鍏冪礌鐨勬柟娉曘傛偍鍙互閫氳繃浠ヤ笅鏂瑰紡灏嗗唴瀹规坊鍔犲埌鍏冪礌鐨勫墠闈備娇鐢╝fter()鏂规硶鍦ㄥ尮閰嶇殑鍏冪礌鍚庢坊鍔犲唴瀹广傝幏鍙栧鍣ㄧ殑绗竴涓厓绱狅紝鐒跺悗浣跨敤insertBefore()鏂规硶鍦ㄥ厓绱犲墠娣诲姞鍐呭銆jQuery缁欏涓笉鍚屽厓绱犳坊鍔燾lass鏍峰紡鐨勬柟娉曪紵jQuery鍙互閫氳繃addClass()鏂规硶缁欏涓笉鍚岀殑html鍏冪礌...
绛旓細鍖哄埆锛1銆append()鐢ㄤ簬鍦ㄨ閫夊厓绱鐨缁撳熬鎻掑叆鍏冪礌銆2銆乸repend()鐢ㄤ簬鍦ㄨ閫夊厓绱犵殑寮澶存彃鍏ュ厓绱犮3銆乤fter()鐢ㄤ簬鍦ㄨ閫夊厓绱犱箣鍚庢彃鍏ュ唴瀹广4銆乥efore()鐢ㄤ簬鍦ㄨ閫夊厓绱犱箣鍓嶆彃鍏ュ唴瀹广侾S锛append锛堬級锛宲repend锛堬級杩欎袱涓嚱鏁扮殑娣诲姞閮芥槸娣诲姞鍒板厓绱犵殑鍐呴儴鐨勩俠efore锛堬級鍜宎fter锛堬級杩欐剰鍛崇潃杩欎袱涓嚱鏁版槸寰鍏冪礌...
绛旓細("p").append("Some appended text.");jQuery prepend() 鏂规硶 jQuery prepend() 鏂规硶鍦ㄨ閫夊厓绱犵殑寮澶存彃鍏ュ唴瀹广傚疄渚嬶細("p").prepend("Some prepended text.");閫氳繃 append() 鍜 prepend() 鏂规硶娣诲姞鑻ュ共鏂板厓绱 涓婇潰鐨勪緥瀛愪腑锛屾垜浠彧鍦ㄨ閫夊厓绱犵殑寮澶/缁撳熬鎻掑叆鏂囨湰/HTML銆備絾鏄痑ppend() 鍜 prepend...
绛旓細閫氳繃jquery浠ｇ爜$("div").append("鎴戞槸閫氳繃append娣诲姞鐨")锛屽緱鍒扮殑缁撴灉鏄細prepend锛氬湪鍏冪礌鍐呴儴鐨勬渶鍓嶉潰娣诲姞鍏冪礌,浣滀负瀛愬厓绱狅紝濡傦細閫氳繃jquery浠ｇ爜$("div").prepend("鎴戞槸閫氳繃prepend娣诲姞鐨")锛屽緱鍒扮殑缁撴灉鏄細before:鍦ㄥ厓绱犵殑鍓嶈竟锛屼綔涓哄厔寮熷厓绱犳坊鍔,濡傦細閫氳繃jquery浠ｇ爜 $(".base").before("鎴戞槸鍦ㄥ墠...
绛旓細浣犲彲浠ョ粰姣忔潯璁板綍鍔犱竴涓敮涓鏍囪瘑锛岀劧鍚庡湪append涔嬪墠閫氳繃鍞竴琛ㄧず鏍￠獙锛屾瘮濡傦細var id = 3, html;if ($('[data-id="' + id + '"]').length === 0) { html = ''; $('ul').append(html);}
绛旓細1銆佸叧浜append锛堬級鏂规硶瀹氫箟鍜岀敤娉曪細append() 鏂规硶鍦ㄨ閫夊厓绱鐨缁撳熬鎻掑叆鎸囧畾鍐呭銆傛澶栵紝濡傞渶鍦ㄨ閫夊厓绱犵殑寮澶存彃鍏ュ唴瀹癸紝璇蜂娇鐢 prepend() 鏂规硶銆2銆佽娉曪細(selector).append(content,function(index,html))銆3銆佽璁′竴涓畝鍗曠殑html椤甸潰锛屽瓨鍦ㄤ竴涓猟iv锛屽拰涓涓坊鍔犳寜閽4銆佽璁＄畝鍗曠殑css鏍峰紡锛5銆佹鏃...
绛旓細1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html锛屽苟寮曞叆jquery銆2銆佸湪index.html涓殑鏍囩锛岃緭鍏query浠ｇ爜锛('body').append('789');3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屽彂鐜789鏂囨湰琚柊澧炴垚鍔熴4銆佹爣绛撅紝鏂板jquery浠ｇ爜锛('body').children().get($('body').children().length - 1).remove...
绛旓細append()鏂规硶榛樿鏄坊鍔犲埌鎸囧畾鍏冪礌鐨鏈鍚庣殑銆傚彲浠ラ噰鐢ㄥ涓嬫柟寮忓皢鍐呭娣诲姞鍒板厓绱犵殑鏈鍓嶉潰銆備娇鐢╝fter()鏂规硶锛屽湪鍖归厤鐨勫厓绱犱箣鍚庢坊鍔犲唴瀹广傝幏鍙栧埌瀹瑰櫒鐨勭涓涓厓绱狅紝鐒跺悗浣跨敤insertBefore()鏂规硶锛屽皢鍐呭娣诲姞鍒拌鍏冪礌涔嬪墠銆
绛旓細text/javascript">RunJS 婕旂ず浠ｇ爜jQuery(function($){$(".subList ul.serch li").bind("click",function(){$("#sub-app").append("涓婂崍");});$("#sub-app").delegate("li", "click", function() {$(this).remove()
