您的位置：首页 > 其它

ul动态增加li

2014-05-01 10:05 155 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航