jquery学习之1.13-节点插入-外部插入和内部插入
节点的插入可以通过内部插入或者外部插入函数来进行，主要函数如下
代码如下：
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>
