節(jié)點(diǎn)的插入之a(chǎn)ppend()和appendTo()的用法介紹
更新時(shí)間：2014年01月13日 15:41:28 作者：
說到節(jié)點(diǎn)的插入想必大家對(duì)append()和appendTo()的用法并不陌生吧，下面有個(gè)不錯(cuò)的是，希望對(duì)大家學(xué)習(xí)有所幫助
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//append()的用法
//$("ul").append("<li title='abc'>hello</li>");
//$("ul").append("<li title='xyz'>world</li>");
//appendTo()的用法
$("<li title='xyz'>hello</li>").appendTo($("ul"));
});
</script>
</head>
<body>
<p title="hello world">您認(rèn)為圣思園培訓(xùn)好不好呢？</p>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特別好</li>
<li title="5">太好了</li>
<li title="6">好的無法描述了</li>
</ul>
</body>
</html>
在已有的節(jié)點(diǎn)上操作
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery4</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
var li1 = $("<li title='abc'>hello</li>");
var li2 = $("<li title='abc'>world</li>");
var li3 = $("<li title='abc'>hello world</li>");
$("ul").append(li1);
$("ul").prepend(li2);
$("ul li:eq(4)").after(li3);
});
</script>
</head>
<body>
<p title="hello world">您認(rèn)為圣思園培訓(xùn)好不好呢？</p>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特別好</li>
<li title="5">太好了</li>
<li title="6">好的無法描述了</li>
</ul>
</body>
</html>
相關(guān)文章
這篇文章主要介紹了jquery常用特效方法使用示例,需要的朋友可以參考下2014-04-04
jQuery on()方法示例及jquery on()方法的優(yōu)點(diǎn)
使用jquery on()方法綁定事件是官方推薦的一種方法，接下來跟著小編來學(xué)習(xí)jquery on()方法，小伙伴快來一起學(xué)習(xí)吧2015-08-08
jQuery-1.9.1源碼分析系列（十一）DOM操作續(xù)之克隆節(jié)點(diǎn)
這篇文章主要介紹了jQuery-1.9.1源碼分析系列（十一）DOM操作續(xù)之克隆節(jié)點(diǎn)的相關(guān)資料,需要的朋友可以參考下2015-12-12
String的Trim()方法失效,在ie8下是有這樣的情況的，解決方法也很簡單使用$.trim(str)即可，需要的朋友可以了解下2013-11-11
使用jQuery給Table動(dòng)態(tài)增加行、清空table的方法
這篇文章主要介紹了使用jQuery給Table動(dòng)態(tài)增加行、清空table的方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
解決JQuery的ajax函數(shù)執(zhí)行失敗alert函數(shù)彈框一閃而過問題
這篇文章主要介紹了解決JQuery的ajax函數(shù)執(zhí)行失敗alert函數(shù)彈框一閃而過問題,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
本文主要分享了jquery實(shí)現(xiàn)數(shù)字輸入框的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)穿梭框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
這篇文章主要給大家詳細(xì)介紹了jQuery.each使用方法及源碼分析的相關(guān)資料,需要的朋友可以參考下2015-07-07
jQuery簡單實(shí)現(xiàn)仿京東分類導(dǎo)航層效果
這篇文章主要介紹了jQuery簡單實(shí)現(xiàn)仿京東分類導(dǎo)航層效果,涉及jQuery針對(duì)鼠標(biāo)事件的響應(yīng)及頁面元素動(dòng)態(tài)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06