ul动态增加li

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