-->

  • aaa
  • bbb
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%

 String path = request.getContextPath();

 String basePath = request.getScheme() + "://"

   + request.getServerName() + ":" + request.getServerPort()

   + path + "/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

 <head>

  <base href="<%=basePath%>">

  <title>My JSP 'index.jsp' starting page</title>

  <meta http-equiv="pragma" content="no-cache">

  <meta http-equiv="cache-control" content="no-cache">

  <meta http-equiv="expires" content="0">

  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

  <meta http-equiv="description" content="This is my page">

  <!--

 <link rel="stylesheet" type="text/css" href="styles.css">

 -->

  <script type="text/javascript"

   src="<%=request.getContextPath()%>/js/jquery-1.2.6.js"></script>

  <script type="text/javascript">

 function add()

 {

 //获取页面所有的ul

 var culs=document.getElementById("uls");

 //获取上一个ul的最后一个li控件

     //定义控件数组

  var childArray=[];

        //alert(culs.innerHTML);

        //判断是不是循环到最后一个li 如果li的总数刚好等于列数 就要将最后一行

        //的最后一个li设置到lastnext控制上 循环完成之后 div里添加一个ul 

   //新增一个li 放到数组中 是第一个位置

   var newli=document.createElement("li");

   //设置li的内部文本时文本框的值

   newli.innerHTML=document.getElementById("text").value;

   //新增的li放在第一个位置

   //去除所有的元素放入数组中 因为上一个控件的最后一个放在了第一位

      for(var j=0;j<culs.childNodes.length ;j++)

      {

		    if(culs.childNodes[0].nodeType != 3 )

	 { alert(culs.childNodes[0].innerHTML);

         //因为添加一个删除一个 最新的一个 用于是第一个位置

      childArray[childArray.length]=culs.childNodes[0];

      //删除添加的那个

      culs.removeChild(culs.childNodes[0]);

	 }

      }

	  childArray[childArray.length]=newli;

     //再将排好序的数组控件添加的当前的ul上

      for(var j=0;j<childArray.length;j++)

      {

      var ctx=childArray[j];

      //添加子元素

      culs.appendChild(ctx)

      }

 }

 //lastnext用于控制最后一行是否刚好等于列数 如果是 新添加一个ul

 </script>

 </head>

 <body>

  <div id="total">

   <ul id="uls">

    <li>

     aaa

    </li>

    <li>

     bbb

    </li>

   </ul>

  </div>

  <input id="text">

  <input type="button" value="add" onclick="add()" />

 </body>

</html>

　　

ul动态增加li的更多相关文章

  1. 解决jquery动态增加元素后children值没有变的问题

    html代码如下: <ul id="attr_input_panel"> <li> <div class="attr_input_item& ...

  2. JS动态增加删除UL节点LI

    JS如何动态增加删除UL节点LI及相关内容. <ul id="ul"> <li id=1>11111111111111111<a href=" ...

  3. JS动态增加删除UL节点LI及相关内容示例

    <ul id="ul"> <li id=1>11111111111111111<a href="javascript:del(1);&quo ...

  4. ul点击li,增加样式

    用户首次绑定后,需要选择一款头像 <!--imgList头像列表--><el-row class="regModel1"> <el-col :span ...

  5. ligerui_ligerTree_005_动态增加“树”节点

    动态添加ligerTree节点:效果图: 源码地址:http://download.csdn.net/detail/poiuy1991719/8571255 <%@ page language= ...

  6. 【轮子狂魔】手把手教你用JS给博客动态增加目录 - 超级懒人版

    动态显示目录的作用 不用每次写博客的时候繁琐的人工整理目录,又可以动态浮动在右下角,方便快速跳到感兴趣的位置同时也可以快速的对文章内容有一个大概的了解. 实现原理 首先根据个人喜好,我习惯了用 h1 ...

  7. jquery中为动态增加的元素添加事件

    // html代码 <ul id="main"> </ul> // js代码 $(function(){ // 动态添加html代码 $("#ma ...

  8. 给ul中的li添加事件的多种方法

    给ul中的li添加事件的多种方法 这是一个常见,而且典型的前端面试题 <ul> <li>11111</li> <li>22222</li> ...

  9. 对Ul下的li标签执行点击事件——如何获取你所点击的标签

    问题所来:做项目时,一般的数据都是用循环动态加载出来的,结构都是一样的,只是绑定的值不同,如何对相同的标签做处理的问题就来了. 例如:点谁就显示谁的数值 <ul > <li id=& ...

随机推荐

  1. Override ListView getAdapter造成的后果

    近期工作中,发现了一个bug,是和ListView Adapter有关的.产生了FC,描写叙述信息大约是 "The content of the adapter has changed bu ...

  2. VC中获取窗体句柄的各种方法

    AfxGetMainWnd AfxGetMainWnd获取自身窗体句柄 HWND hWnd = AfxGetMainWnd()->m_hWnd; GetTopWindow 函数功能:该函数检查与 ...

  3. .Net设计模式_工厂模式(3)

    3.抽象工厂模式 引言: 我们知道汽车需要很多部件才能组装成一辆成品的车,那么我们需要汽车厂生产很多东西,如:马达.车轴.轮胎等,这些东西组装起来后成为了一辆车. 这些东西就是产品族,图解:(出之ht ...

  4. Android开发百度地图（一）--显示基本地图

    最近由于比赛的需要,自己学习了一下百度地图的开发.希望以下的内容能够对大家有用. 一.开发前的准备工作: 1.注册百度账号,并登录.(有百度账号的话直接登录) 2.申请Key,地址:http://de ...

  5. iOS UIKit：TableView之编辑模式（3）

    一般table view有编辑模式和正常模式,当table view进入编辑模式时,会在row的左边显示编辑和重排控件,如图 42所示的编辑模式时的控件布局:左边的editing control有表 ...

  6. Centos如何设置静态IP地址,LINUX怎么修改IP地址

    1.登陆连接centos系统,输入 ifconfig 可以查看到当前本机的IP地址信息 2.临时设置IP地址: 输入 ifconfig eth0 (默认是第一个网卡) 后面接IP地址, 网络掩码和 网 ...

  7. ruby gem源更换国内源gems.ruby-china.org数据源

    gem sources -l gem sources --add https://gems.ruby-china.org/ --remove https://rubygems.org/ 更新缓存 ge ...

  8. 20151225jquery学习笔记---选项卡UI

    圣诞节快乐,哈哈哈....选项卡(tab),是一种能提供给用户在同一个页面切换不同内容的 UI. 尤其是在页面布局紧凑的页面上,提供了非常好的用户体验.一． 使用 tabs使用 tabs 比较简单,但 ...

  9. PHP和MYSQL的编码问题

    http://blog.csdn.net/martinkro/article/details/5352474 1 MYSQL中的字符集概念  Mysql的字符集里有两个概念,一个是"Char ...

  10. 学习笔记_JDBC_1_Demo1_连接数据库的基本操作和步骤

    常见错误:连数据库时,这句话String url = "jdbc:mysql://localhost/数据库名";数据库名可能和你建的数据库名不一样 1.安装Mysql,记住此时你 ...