快捷導(dǎo)航

jquery 添加節(jié)點(diǎn)的幾種方法介紹

更新時(shí)間：2013年09月04日 17:22:43 作者：

添加節(jié)點(diǎn)的方法有很多，在本文將為大家介紹下jquery中添加節(jié)點(diǎn)幾種方法，感興趣的朋友可以參考下

 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>jQuery插入,復(fù)制、替換和刪除節(jié)點(diǎn)</title> 
<script type="text/javascript" src="jquery-1.3.2.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
//幾種添加節(jié)點(diǎn)的方法 
//$("p").append("<b>你好嗎？</b>");//向p元素中追加《b》 
//$("<b>你好嗎？</b>").appendTo("p");//將《b》追加到p元素中 
//$("p").prepend("<b>你好嗎？</b>");//向p中前置《b》 
//$("<b>你好嗎？</b>").prependTo("p");//將《b》前置到p元素中 
//$("p").after("<b>你好嗎？</b>");//向p元素后插入《b》 
//$("<b>你好嗎？</b>").insertAfter("p");//將《b》插入到p元素后邊 
//$("p").before("<b>你好嗎？</b>");//在p元素之前添加《b》 
//$("<b>你好嗎？</b>").insertBefore("p");//將《b》插入到p元素前面 


//幾種刪除節(jié)點(diǎn)的方法 
//var $li=$("ul li:eq(1)").remove();//刪除ul節(jié)點(diǎn)中第2個(gè)元素節(jié)點(diǎn) 
//$("ul").append($li);//把剛刪除的元素節(jié)點(diǎn)從新添加到ul元素中去 
//$("ul li").remove("li[title!=菠蘿]");//將ul元素下title屬性不等于"菠蘿"的li元素刪除 
//$("ul li:eq(1)").empty();//清空ul節(jié)點(diǎn)下第2個(gè)li元素的內(nèi)容 

//復(fù)制節(jié)點(diǎn) 
/* $("ul li").click(function(){ 
$(this).clone(true).appendTo("ul");//復(fù)制當(dāng)前點(diǎn)擊的節(jié)點(diǎn)，并將它追加到《ul》元素中，當(dāng)添加參數(shù)時(shí)復(fù)制它的事件 

}); 
*/ 
//替換節(jié)點(diǎn) 
// $("p").replaceWith("<strong>你最不喜歡的水果是？</Strong>"); 



}); 
</script> 
</head> 
<body> 
<p>你好！</p> 
你最喜歡的水果是？ 
<ul> 
<li title="蘋果">蘋果</li> 
<li title="橘子">橘子</li> 
<li title="菠蘿">菠蘿</li> 
</ul> 
</body> 
</html> 

您可能感興趣的文章:

相關(guān)文章

解決JQuery的ajax函數(shù)執(zhí)行失敗alert函數(shù)彈框一閃而過(guò)問題
這篇文章主要介紹了解決JQuery的ajax函數(shù)執(zhí)行失敗alert函數(shù)彈框一閃而過(guò)問題,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-04-04
Jquery使用JQgrid組件處理json數(shù)據(jù)
這篇文章介紹了Jquery使用JQgrid組件處理json數(shù)據(jù)的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-06-06
jQuery 添加樣式屬性的優(yōu)先級(jí)別方法(推薦)
下面小編就為大家?guī)?lái)一篇jQuery 添加樣式屬性的優(yōu)先級(jí)別方法(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-06-06
jquery如何改變html標(biāo)簽的樣式(兩種實(shí)現(xiàn)方法)
對(duì)于如何修飾html標(biāo)簽，這對(duì)于js來(lái)說(shuō)，可以通過(guò)setAttribute來(lái)設(shè)置標(biāo)簽的屬性，通過(guò)getAttribute來(lái)得到標(biāo)簽的屬性，而在jq中當(dāng)然也可以實(shí)現(xiàn)類似的功能，方法上肯定比js要簡(jiǎn)化多了,接下來(lái)介紹實(shí)現(xiàn)方法，感興趣的朋友可以了解下
2013-01-01
JQuery 學(xué)習(xí)筆記01 JQuery初接觸
jQuery是一個(gè)Javascript庫(kù)，用于簡(jiǎn)化Web相關(guān)的Javascript開發(fā)
2010-05-05
jQuery中:submit選擇器用法實(shí)例
這篇文章主要介紹了jQuery中:submit選擇器用法,實(shí)例分析了:submit選擇器的功能、定義及匹配提交按鈕的使用技巧,需要的朋友可以參考下
2015-01-01
jquery中通過(guò)父級(jí)查找進(jìn)行定位示例
如果想要查找到有icon這個(gè)class的span除了用原始的代碼還可以用父級(jí)查詢的方法進(jìn)行定位，具體的實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助
2013-06-06
jQuery Attributes(屬性)的使用(一、屬性篇)
本系列文章主要講述jQuery框架的屬性(Attributes)使用方法，文章分為：屬性篇、類篇、Html代碼篇&文本篇、值篇共4篇文章。
2009-12-12
jQuery插件Timelinr 實(shí)現(xiàn)時(shí)間軸特效
時(shí)間軸是依據(jù)時(shí)間順序，把一方面或多方面的事件串聯(lián)起來(lái)，形成相對(duì)完整的記錄體系，再運(yùn)用圖文的形式呈現(xiàn)給用戶，本文給大家收集了互聯(lián)網(wǎng)上的效果比較不錯(cuò)的一款，分享給大家
2015-10-10
基于jQuery倒計(jì)時(shí)插件實(shí)現(xiàn)團(tuán)購(gòu)秒殺效果
倒計(jì)時(shí)在WEB上應(yīng)用非常廣泛,如考試系統(tǒng)倒計(jì)時(shí),團(tuán)購(gòu)網(wǎng)站中的優(yōu)惠活動(dòng)倒計(jì)時(shí)等等。今天,我們來(lái)使用jQuery倒計(jì)時(shí)超級(jí)實(shí)現(xiàn)團(tuán)購(gòu)秒殺效果，感興趣的朋友一起學(xué)習(xí)吧
2016-05-05