• 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;20%;height:30%;float:left">div1</div> 
    62      <br>
    63   </body>
    64 </html>
    my Code
  • 相关阅读:
    ADO.Net对Oracle数据库的操作(转)
    代码反思(1)
    继承与多态
    存储过程
    linux学习流程及内容概括
    Linux下终端快捷键
    查找算法
    epoll解读
    TCP/udp编程
    如何学习嵌入式
  • 原文地址:https://www.cnblogs.com/luckyflower/p/3629256.html
Copyright © 2020-2023  润新知