-->

  • 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. android 文件读取（assets、raw）

    需要注意的是,来自Resources和Assets 中的文件只可以读取而不能进行写的操作. assets文件夹里面的文件都是保持原始的文件格式,需要用AssetManager以字节流的形式读取文件. ...

  2. c++虚表的使用 通过虚表调用虚函数的演示代码

    //演示一下c++如何找到虚表地址vptr以及如何通过虚表调用虚函数 //zhangpeng@myhexin.com 20130811 #include <iostream> using ...

  3. git版本号管理工具的上手

    git是一个分布式的版本号管理工具 和其它集中式版本号管理 工具相比具有下面长处: 1.能够在不联网的情况下开发 2.能够方便的建立本地分支 3.本地化的日志,高速获得信息 git命令的使用 mkdi ...

  4. android87 Service

    ---------------------------------------------------------------------------- #Service(服务和Activity是运行 ...

  5. 谈谈JSON数据格式

    JSON 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.        本文主要是对JS操作JSON的要领做下总结.           在JSON中,有两种结构:对 ...

  6. linux上安装memcached

    我的版本为Centos Release 5.3 (Final)使用这个命令可以知道你的Linux版本1.cat /etc/redhat-release首先要安装libevent库.cd /usr/lo ...

  7. Linux软连接和硬链接（摘录）

    1.Linux链接概念Linux链接分两种,一种被称为硬链接(Hard Link),另一种被称为符号链接(Symbolic Link).默认情况下,ln命令产生硬链接. [硬连接]硬连接指通过索引节点 ...

  8. Android（java）学习笔记143：android提供打开各种文件的API接口：setDataAndType

    android 打开各种文件(setDataAndType) private void openFile(File file){ Intent intent = new Intent(); inten ...

  9. 骑士飞行棋 C#代码详解

    最近看见一个骑士飞行棋的小游戏代码,感觉这个代码中将大多数C#的基础知识都运用到了,是一个新手检验学习成果的有效方法,特此将这个代码整理一遍.这是一个控制台程序.这是代码下载地址,代码中的注释非常详细 ...

  10. c# switch case语句

    switch是一个控制语句,用于选择一个要执行的语句块. 一个switch语句包括一个或多个执行的语句块.每个语句块包括一个或多个case标签,case后接要执行的语句. 如下面的代码 Codeint ...