Jquery Node節點的基礎入門案例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery-1.3.1.js"></script> </head> <body> <input type="button" value="廣州後面添加深圳(內部插入)" id="b1"/><br> <input type="button" value="廣州後面添加深圳(外部插入)" id="b2"/><br> <input type="button" value="廣州後面添加深圳(傳統方法)" id="b3"/><br> <input type="button" value="添加深圳在北京和上海之間" id="b4"/><br> <input type="button" value="廣州移到上海前面" id="b5"/><br> <br><ul id="city"> <li id="bj" value="beijing">北京</li> <li id="sh" value="shanghai">上海</li> <li id="gz" value="guangzhou">廣州</li> </ul><br> </body> <script type="text/javascript"> //append:類似於DOM裡面的appendChild()函數,將新元素加入該元素內部做為子節點 $("#b1").click(function(){ /*jquery對象構造: *①:一步到位(不利於功能擴展) *②:逐步構造,利於功能擴展 */ //var LI=$("<li id='sz' value='shenzhen'>深圳</li>"); var LI=$("<li></li>"); LI.attr("id","sz"); LI.attr("value","shenzhen"); LI.text("深圳"); //$("#city").append(LI); //等價於 LI.appendTo($("#city")); }); //after:將元素插入到並列元素的後面 $("#b2").click(function(){ var LI=$("<li id='sz' value='shenzhen'>深圳</li>"); $("#gz").after(LI); //等價於 LI.inserAfter( $("#gz")); }); $("#b3").click(function(){ //創建節點 var newNode=document.createElement("li"); newNode.setAttribute("id","sz"); newNode.setAttribute("value","shenzhen"); newNode.innerHTML="深圳"; //將節點掛在dom數上 document.getElementById("gz").appendChild(newNode); }); $("#b4").click(function(){ var LI=$("<li id='sz' value='shenzhen'>深圳</li>"); //$("#bj").after(LI); $("#sh").before(LI); }); $("#b5").click(function(){ $("#bj").before($("#gz")); }); </script> </html>