本文執行個體講述了jQuery插入節點和移動節點的方法。分享給大家供大家參考，具體如下：
1. 插入節點：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="js/jquery-1.10.1.min.js" type="text/javascript"></script><script type="text/javascript">//<![CDATA[$(function(){ var $li_1 = $("<li title='香蕉'>香蕉</li>"); // 建立第一個<li>元素 var $li_2 = $("<li title='雪梨'>雪梨</li>"); // 建立第二個<li>元素 var $li_3 = $("<li title='其它'>其它</li>"); // 建立第三個<li>元素 var $parent = $("ul"); // 擷取<ul>節點，即<li>的父節點 var $two_li = $("ul li:eq(1)"); // 擷取<ul>節點中第二個<li>元素節點 $parent.append($li_1); // append方法將建立的第一個<li>元素添加到父元素的最後面 $parent.prepend($li_2); // prepend方法將建立的第二個<li>元素添加到父元素裡的最前面 $li_3.insertAfter($two_li); // insertAfter方法將建立的第三個<li>元素元素插入到擷取的<li>之後});//]]></script></head><body><p title="選擇你最喜歡的水果." >你最喜歡的水果是?</p><ul> <li title='蘋果'>蘋果</li> <li title='橘子'>橘子</li> <li title='菠蘿'>菠蘿</li></ul></body></html>
效果圖：
2. 移動節點：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="js/jquery-1.10.1.min.js" type="text/javascript"></script><script type="text/javascript">//<![CDATA[$(function(){ var $one_li = $("ul li:eq(1)"); // 擷取<ul>節點中第二個<li>元素節點 var $two_li = $("ul li:eq(2)"); // 擷取<ul>節點中第三個<li>元素節點 $two_li.insertBefore($one_li); // 移動節點});//]]></script></head><body><p title="選擇你最喜歡的水果." >你最喜歡的水果是?</p><ul> <li title='蘋果'>蘋果</li> <li title='橘子'>橘子</li> <li title='菠蘿'>菠蘿</li></ul></body></html>
效果圖：
更多關於jQuery相關內容感興趣的讀者可查看本站專題：《jQuery常見事件用法與技巧總結》、《jQuery常用外掛程式及用法總結》、《jQuery操作json資料技巧匯總》、《jQuery擴充技巧總結》、《jQuery拖拽特效與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選取器用法總結》
希望本文所述對大家jQuery程式設計有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
