jquery 添加節(jié)點的幾種方法介紹
更新時間:2013年09月04日 17:22:43 作者:
添加節(jié)點的方法有很多,在本文將為大家介紹下jquery中添加節(jié)點幾種方法,感興趣的朋友可以參考下
復制代碼 代碼如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery插入,復制、替換和刪除節(jié)點</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//幾種添加節(jié)點的方法
//$("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é)點的方法
//var $li=$("ul li:eq(1)").remove();//刪除ul節(jié)點中第2個元素節(jié)點
//$("ul").append($li);//把剛刪除的元素節(jié)點從新添加到ul元素中去
//$("ul li").remove("li[title!=菠蘿]");//將ul元素下title屬性不等于"菠蘿"的li元素刪除
//$("ul li:eq(1)").empty();//清空ul節(jié)點下第2個li元素的內(nèi)容
//復制節(jié)點
/* $("ul li").click(function(){
$(this).clone(true).appendTo("ul");//復制當前點擊的節(jié)點,并將它追加到《ul》元素中,當添加參數(shù)時復制它的事件
});
*/
//替換節(jié)點
// $("p").replaceWith("<strong>你最不喜歡的水果是?</Strong>");
});
</script>
</head>
<body>
<p>你好!</p>
你最喜歡的水果是?
<ul>
<li title="蘋果">蘋果</li>
<li title="橘子">橘子</li>
<li title="菠蘿">菠蘿</li>
</ul>
</body>
</html>
您可能感興趣的文章:
- JQuery給元素添加/刪除節(jié)點比如select
- Jquery動態(tài)添加及刪除頁面節(jié)點元素示例代碼
- jquery 刪除節(jié)點 添加節(jié)點 找兄弟節(jié)點的簡單實現(xiàn)
- JQuery Ajax 異步操作之動態(tài)添加節(jié)點功能
- JQuery給select添加/刪除節(jié)點的實現(xiàn)代碼
- jQuery循環(huán)遍歷子節(jié)點并獲取值的方法
- JQuery遍歷DOM節(jié)點的方法
- JQuery中節(jié)點遍歷方法實例
- Jquery遍歷節(jié)點的方法小集
- Jquery節(jié)點遍歷next與nextAll方法使用示例
- jQuery實現(xiàn)動態(tài)添加節(jié)點與遍歷節(jié)點功能示例
相關文章
jQuery實現(xiàn)最簡單的切換圖效果【可兼容IE6、火狐、谷歌、opera等】
這篇文章主要介紹了jQuery實現(xiàn)最簡單的切換圖效果,可兼容IE6、火狐、谷歌、opera等瀏覽器,涉及jQuery結(jié)合時間函數(shù)動態(tài)操作頁面元素的相關技巧,非常簡單實用,需要的朋友可以參考下2016-09-09JQuery中兩個ul標簽的li互相移動實現(xiàn)方法
這篇文章主要介紹了JQuery中兩個ul標簽的li互相移動實現(xiàn)方法,可實現(xiàn)ul標簽中l(wèi)i標簽內(nèi)容相互替換的技巧,涉及jQuery操作頁面元素的相關技巧,需要的朋友可以參考下2015-05-05jQuery遍歷之next()、nextAll()方法使用實例
這篇文章主要介紹了jQuery遍歷之next()、nextAll()方法使用實例,本文先是給出了實例代碼,然后對代碼的作用分析和說明,需要的朋友可以參考下2014-11-11jQuery中的ready函數(shù)與window.onload誰先執(zhí)行
這篇文章主要介紹了jquery中ready函數(shù)與window.onload函數(shù)的區(qū)別,別講解了他們各自執(zhí)行的時機,通俗易懂,需要的朋友可以參考下。2016-06-06jQuery validate插件submitHandler提交導致死循環(huán)解決方法
這篇文章主要介紹了jQuery validate插件submitHandler提交導致死循環(huán)解決方法,對比分析了常見的錯誤寫法造成死循環(huán)與正確寫法,需要的朋友可以參考下2016-01-01