div 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">
  
  <script type="text/javascript"
   src="<%=request.getContextPath()%>/js/jquery-1.2.6.js"></script>
  <script type="text/javascript">
function add()
{
//获取页面所有的ul
var uls=document.getElementsByTagName("ul");
//获取上一个ul的最后一个li控件
var next;
//每一个ul 有多少个li 手动控制
var collength=3;
//控制假如最后一行刚好是3个需要新增一个ul 控制
var lastnext;
//循环遍历
for(var i=0;i<uls.length;i++){
  var culs=uls[i];
     //定义控件数组
  var childArray=[];
        //alert(culs.innerHTML);
        //判断是不是循环到最后一个li 如果li的总数刚好等于列数就要将最后一行
        //的最后一个li设置到lastnext控制上循环完成之后 div里添加一个ul
        if(i==(uls.length-1) && culs.childNodes.length==collength)
   lastnext=culs.childNodes[culs.childNodes.length-1];
     //如果是第一个ul
  if(i==0)
  {
      //获取第一个ul的最后一个li子元素
   next=culs.childNodes[culs.childNodes.length-1];
   //如果li的总数刚好等于列数则需要删除最后一列
   if(culs.childNodes.length==collength)
       culs.removeChild(next);
   //新增一个li 放到数组中是第一个位置
   var newli=document.createElement("li");
   //设置li的内部文本时文本框的值
   newli.innerHTML=document.getElementById("text").value;
   //新增的li放在第一个位置
   childArray[childArray.length]=newli;

  }else
  {
   //如果不是第一行上一行的最后一个控件next 放到当前行的第一位
      childArray[childArray.length]=next;
      //如果li的总数刚好等于列数则需要删除最后一列
   if(culs.childNodes.length==collength)
   {
    //将最后一个赋给next控制
    next=culs.childNodes[culs.childNodes.length-1];
    //删除最后一个
    culs.removeChild(next);
   }

  }
   //去除所有的元素放入数组中因为上一个控件的最后一个放在了第一位
      for(var j=0;j<=culs.childNodes.length ;j++)
      {
         //因为添加一个删除一个最新的一个用于是第一个位置
      childArray[childArray.length]=culs.childNodes[0];
      //删除添加的那个
      culs.removeChild(culs.childNodes[0]);
      }
     //再将排好序的数组控件添加的当前的ul上
      for(var j=0;j<childArray.length;j++)
      {
      var ctx=childArray[j];
      //添加子元素
      culs.appendChild(ctx)
      }
}
//lastnext用于控制最后一行是否刚好等于列数如果是新添加一个ul
if(lastnext!=null)
{
     //创建ul
  var ul=document.createElement("ul");
  //添加最后一个元素为子元素
  ul.appendChild(lastnext);
  //div上添加该ul为子元素
  document.getElementById("total").appendChild(ul);
}
}
</script>
</head>