jquery学习之1.13-节点插入-外部插入和内部插入

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

节点的插入可以通过内部插入或者外部插入函数来进行，主要函数如下

代码如下：

 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       //内部插入法
21       var $myli=("<li id=‘test‘ name=‘xuanze11‘>选择1_1</li>");         
22      //***********给选择1下面添加选择0******************************
23       $("#li1").after($myli);
24     
25            }
26      ); 
27      $("#bt2").click(function ()
28      {
29      //***********给选择1前面添加选择0_1******************************
30     
31          $("#li1").before($("<li id=‘test‘ name=‘xuanze01‘>选择0_1</li>"));
32      });
33      
34      $("#bt3").click(function(){
35      //***********外部插入法：把选择1移动到选择2后面******************************
36     
37          $("#li1").insertAfter("#li2");
38      });    
39      $("#bt4").click(function(){
40      //***********内部插入法：把选择1移动到选择2后面******************************
41     
42          $("#li2").append($("#li1"));
43      });    
44       
45    });  
46   </script>
47   </head> 
48   <body>
49     <input type="button"  id="bt1" value="给选择1下面添加选择1_1" ></input>   
50   <input type="button"  id="bt2" value="给选择1前面添加选择0_1" ></input>   
51  <input type="button"  id="bt3" value="外部插入法：把选择1移动到选择2后面" ></input>   
52  <input type="button"  id="bt4"  value="内部插入法：把选择1移动到选择2后面" ></input>   
53  <input type="button"  id="bt5"  value="" ></input>   
54    <ul id="select">
55         <li id="li1">选择1</li>
56         <li id="li2">选择2</li>
57    <li id="li3">选择3</li>
58    <li id="li4">选择4</li>
59    <li id="li5">选择5</li>
60    </ul>
61     <div id="div1" title="第一个div" style="border:1px solid;width:20%;height:30%;float:left">div1</div> 
62      <br>
63   </body>
64 </html>