jquery学习之1.11-通过传统方法和jquery方法进行节点添加
节点添加使用的jquery方法有以下几个：
主要代码如下：
1 <%@ page language="java" import="java.util.*" 2 pageEncoding="utf-8"%> 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 4 <html> 5 <head> 6 <title>11</title> 7 <style type="text/css"> 8 .one {width:30%;height:20%;background:#ff00ff;} 9 </style> 10 <script type="text/javascript" src="../js/jquery-1.11.0.js"> 11 </script> 12 <script language="javascript"> 13 $(document).ready(function() 14 { 15 //***********************给ul中添加一个li节点******* 16 $("#bt1").click( 17 function() 18 { 19 //两种方式 20 //first 直接添加 21 var $myli=("<li id='test' name='xuanze0'>选择0</li>"); 22 //***********给选择3下面添加选择0****************************** 23 //备注，如果使用.city则每个匹配对象都会添加一个li 24 // $("ul").append("<li>选择0</li>"); 25 //$('#select').append($myli); 26 27 //使用appendto在后面添加 28 //$myli.appendTo($("ul")); 29 30 31 //second ：step by step 32 $myli=$("<li></li>"); 33 $myli.text("选择0"); 34 $myli.attr("id","test"); 35 $myli.attr("name","xuenze0"); 36 $('#select').append($myli); 37 } 38 ); 39 $("#bt2").click( 40 function() 41 { 42 var $myli2=$("<li>选择4</li>"); 43 //***********给选择1上面添加选择0****************************** 44 $('#select').prepend($myli); 45 }); 46 $("#bt4").click( 47 function() 48 { 49 var $myli2=$("<li>选择1——1</li>"); 50 //***********给选择1上面添加选择0****************************** 51 $myli2.insertAfter($("#li")); 52 }); 53 54 $("#bt5").click( 55 function() 56 { 57 var $myli2=$("<li>选择3——0</li>"); 58 //***********给选择1上面添加选择0****************************** 59 $("#li3"). before($myli2); 60 }); 61 62 }); 63 64 //传统添加节点 65 function test() 66 { 67 var myli=document.createElement("li"); 68 myli.setAttribute("id", "test"); 69 myli.setAttribute("name","xuanze0"); 70 myli.innerHTML="选择111"; 71 document.getElementById("select").appendChild(myli); 72 } 73 74 </script> 75 </head> 76 <body> 77 <input type="button" id="bt1" value="给选择3下面添加选择0" ></input> 78 <input type="button" id="bt2" value="给选择1上面添加选择0" ></input> 79 <input type="button" id="bt3" onclick="test()" value="给选择0上面添加选择111" ></input> 80 <input type="button" id="bt4" value="给选择1上下面添加1——1" ></input> 81 <input type="button" id="bt5" value="给选择3前面添加3——0" ></input> 82 <ul id="select"> 83 <li id="li1">选择1</li> 84 <li id="li2">选择2</li> 85 <li id="li3">选择3</li> 86 <li id="li4">选择4</li> 87 <li id="li5">选择5</li> 88 </ul> 89 <div id="div1" title="第一个div" style="border:1px solid;width:20%;height:30%;float:left">div1</div> 90 <br> 91 </body> 92 </html>
