jquery学习之1.11-通过传统方法和jquery方法进行节点添加

浏览数：20 / 时间：2015年06月09日

节点添加使用的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>