完成：<script> window.onload=function(){ var obj=document.getElementsByTagName("b");
for(var i=0;i<obj.length;i++){ obj[i].onclick=function(){ var level=this.previousSibling; var child=this.nextSibling; addNode(level,child) } } } function addNode(level,divChild){ var id=level.id; var div=divChild;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试</title>
<style>
.test{
margin-left:10px;
}
</style>
<script src="jquery-1.3.2.js"></script>
<script>
$(function(){
function add(){
$(this).parent().append("<div class='test'><input type='text' id='input1' class='input' /><font size='+1'>+</font></div>");
}
$("font").click(function(){
$(this).parent().append("<div class='test'><input type='text' id='input1' class='input' /><font size='+1'>+</font></div>");
$("font").click(add);
});
});
</script>
</head><body>
<div class="test"><input type="text" id="input1" class="input" /><font size="+1">+</font></div>
<div class="test"><input type="text" id="input2" class="input" /><font size="+1">+</font></div>
<div class="test"><input type="text" id="input3" class="input" /><font size="+1">+</font></div>
</body>
</html>
<html>
<head>
<title>添加目录</title>
<style type="text/css"></style>
<script language="javascript"> var a=1;
var b=0;
var d=0;
var line=1;
function addOne(){
++a;
b=0;
d=0;
var newTr = dirTable.insertRow(line);
var newTd0 = newTr.insertCell();
newTd0.innerHTML='|----<input type="text" name=dira'+a+' size="15" value=level1_'+a+'> <img alt="添加二级目录" src="images/add.jpg" style="cursor:hand;" onclick="addTwo()">';
++line;
}
function addTwo(){
var newTr = dirTable.insertRow(line);
++b;
var newTd0 = newTr.insertCell();
newTd0.innerHTML=' |----<input type="text" name=dira'+a+'b'+b+' size="15" value=level_'+(a)+(b)+'> <img alt="添加表" src="images/add.jpg" style="cursor:hand;" onclick="addThree()">';
++line;
d=0;
}
function addThree(){
var newTr = dirTable.insertRow(line);
++d;
var newTd0 = newTr.insertCell();
newTd0.align="right";
newTd0.innerHTML=' |----<input type="text" name=dira'+a+'b'+b+'c'+d+' size="15" value=level_'+(a)+(b)+(d)+'> ';
//<img alt="添加表" src="images/add.jpg" style="cursor:hand;" onclick="addThree('+a+','+b+')">
++line;
}
</script>
</head>
<body>
<form name="dirForm">
<table id="dirTable" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>|----<input type="text" name="dira1" size="15" value="level1_1"> <img alt="添加二级目录" src="images/add.jpg" style="cursor:hand;" onclick="addTwo()">
</td>
</tr>
<tr><td> <span style="cursor:hand;color: blue;" onclick="addOne()">添加一级目录</span></td></tr>
</table>
<br>
<input type="button" value=" 提交 " onclick="return dirInput()">
<input type="reset" value=" 重写 ">
</form>
</body>
</html>以上是我写的，但是，只能顺序的添加，添加就不能回头了...
window.onload=function(){
var obj=document.getElementsByTagName("b");
for(var i=0;i<obj.length;i++){
obj[i].onclick=function(){
var level=this.previousSibling;
var child=this.nextSibling;
addNode(level,child)
}
}
}
function addNode(level,divChild){
var id=level.id;
var div=divChild;
if(!div){
div=document.createElement("div");
level.parentNode.appendChild(div);
}
var tag=id.substring(7).replace(/\d/g," ");
var cnt=div.childNodes.length+1;
var divAdd=document.createElement("div");
divAdd.innerHTML=tag+"|----<input type=text id="+(id+cnt)+" value="+(id+cnt)+"><b>+</b>";
divAdd.getElementsByTagName("b")[0].onclick=function(){
var level=this.previousSibling;
var child=this.nextSibling;
addNode(level,child)
}
div.appendChild(divAdd);
}
</script>
<style>
</style>
<div>
<div>|----<input type=text id=level1_1 value=level1_1><b>+</b></div>
<div>|----<input type=text id=level1_2 value=level1_2><b>+</b></div>
</div>