-->

  • 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. wpf 透明窗体中使用webbrowser

    wpf ,PNG图形半透明窗体 ,使用webbrowser控件   附件:http://files.cnblogs.com/xe2011/WpfApplication1_webbrowser_tran ...

  2. [Javascript] Lodash: Refactoring Simple For Loops (_.find, _.findLast, _.filter)

    This lesson shows how to refactor your old loops into using a simpler and more powerful lodash-style ...

  3. Could not find class &#39;****&#39;, referenced from method #####

    找不到类,多半也是和第三方的jar包有关. 将找不到的类.在下图中的地方勾选出来.假设jar太多.有的类有冲突的话,须要明白其先后顺序. 请外一篇和第三方jar有关的异常的文章. Conversion ...

  4. JSON返回的自定义

    当返回json格式的数据时,不想自己组织结果集,可以利用类的call方法. json类: <?php class Json { private $_data; public function _ ...

  5. ajax技术的基本概述

    大家都知道ajax并非一种新的技术,而是几种原有技术的结合体.它由下列技术组合而成. 1.使用CSS和XHTML来表示. 2. 使用DOM模型来交互和动态显示. 3.使用XMLHttpRequest来 ...

  6. Markdown 添加 Latex 数学公式

    添加公式的方法 Latex 数学公式语法 添加公式的方法 行内公式 $行内公式$ 行间公式 $$行间公式$$ Latex 数学公式语法 角标(上下标) 上标命令^{} 下标命令_{} 上下标命令用来放 ...

  7. Mac安装Mysql无法登录

    Mac安装的Mysql5.7.10 执行mysql -u root -p 就要求输入密码,但是新安装是没密码的.然后就会报错. ERROR 1045 (28000): Access denied fo ...

  8. ReadWriteLock与ReentrantReadWriteLock

    JAVA的JUC包中的锁包括"独占锁"和"共享锁".JUC中的共享锁有:CountDownLatch.CyclicBarrier.Semaphore.Reent ...

  9. string应用

    今天在网上搜了一些资料. C# string类应用 判断是否包含子串 想要判断一个字符串中是否包含某个子串,可以用Contains方法来实现: ? public bool Contains (stri ...

  10. sharedPreference的奇怪bug

    一定要清楚sp的结构,而且要知道是什么类型的.类型不对,会引起很多不知道的bug,比如本来是int类型的值,如果用String的类型去匹配,会让Activity开Activity Thread,不断地 ...