ul动态增加li | nicoollas

-->
<%@ 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>