JavaScript 树型目录

[size=medium]

这棵树属于本人原创，我正在修改中，另外图片的样式也还没有加上，大家帮帮忙，水平有限，初学js，图片应该怎么来堆放呢？
/*
 * list[id] 是保存每个节点信息的数组
 * author wcjy5128@126.com
 * 2010-4-8 
 */
var list = [];
var tree = function(objName) {
	this.title = objName;
	this.liNode = [];
	this.ulNode = [];
	this.str = document.createElement("div");
	this.str.innerHTML = this.title;
	//将各个图片的路径封装成json格式
	this.imgs = {
		folderClose:"img/folderclose.gif",
		folderOpen:"img/folderopen.gif",
		rootFolder:"img/imgfolder.gif",
		line:"img/line.gif",
		join:"img/join.gif",
		joinButtom:"img/joinbottom.gif",
		emty:"img/empty.gif",
		minus:"img/minus.gif",
		noLine_minus:"img/nolines_minus.gif",	
		noLine_plus:"img/nolines_plus.gif",
		plus:"img/plus.gif",
		plusBottom:"img/plusbottom.gif",
		line:"img/line.gif",
		joinButtom:"img/joinbottom.gif",
		page:"img/page.gif"
	};
};

//节点ID，父节点ID，节点名字，链接，目标  --->节点信息
tree.prototype.node = function(id,parentId,nodeName,url,target) {
	this.id = id;
	this.parentId = parentId;
	this.nodeName = nodeName;
	this.url = (url==null?"javascript:void(0)":url);
	this.target = (target==null?"":target);
	this.idLength = id.length;	//ID的长度
	this.hasChild = false;		//是否有子节点
	this.hasparent = false;		//是否有父节点
	this.parentNode;			//记录该节点的父节点
	this.childNode;				//记录该节点的子节点
	this.isLast = false;		//是否是最后一个节点
	this.isTop = false;			//是否是顶层节点
};

//增加节点
tree.prototype.add = function(id,parentId,nodeName,url,target) {
	var node = new this.node(id,parentId,nodeName,url,target);
	list.push(node);
	this.createTree(node); 
};

//产生一棵树
tree.prototype.createTree = function(node) {
	//判断如果它的父节点的ID是0 则表示是一个父节点  则创建一个li列表  所有的父节点是0的节点都是兄弟节点
		this.HasParent(node);
		if(!node.hasparent) {
			node.isTop = true;		//该节点是顶层节点 即根节点
			this.formatNode(node);
		} 
		if(node.hasparent) {//node是子节点，有父节点  则为该父节点的子节点创建一个div  该节点的所有子节点均在该div中
			this.findParent(node);
			this.appendChild(node.parentNode,node);		//将父节点和子节点一并传入到子节点中 获取相应的信息
		} else {
			this.formatNode(node);
		}
};

//找到父节点
tree.prototype.findParent = function(node) {
	var parent;
	for(var i=0;i<list.length;i++) {
		if(list[i].id == node.parentId) {			//表示该node是属于某个节点的子节点
			node.parentNode = list[i];				//找到父节点位置
		}
	}
};

//格式化兄弟节点
tree.prototype.formatNode = function(node) {
	var div1 = document.createElement("div");
	var img = document.createElement("img");
	img.src = this.imgs.line;
	var div2 = document.createElement("div");
	div2.className = "parent";
	div2.id = node.id;
	div2.innerHTML = "<img id='img"+node.id+"' onclick='expandChild(this.parentNode.id)' src='"+this.imgs.plus+"'/><img src='"+this.imgs.folderClose+"'/><a href='"+node.url+"' target='"+node.target+"'>"+node.nodeName+"</a>";
	div1.appendChild(div2);
	this.ulNode[node.id] = div1;
	this.liNode[node.id] = div2;
};

//添加子节点
tree.prototype.appendChild = function(parent,node) {
	var div = document.createElement("div");
	div.className = "child";
	div.id = parent.id+"_"+node.id;
	div.innerHTML = "<img id='img"+node.id+"' onclick='expandChild(this.parentNode.id)' src='"+this.imgs.plusBottom+"'/><img src='"+this.imgs.folderClose+"'/><a href='"+node.url+"' target='"+node.target+"'>"+node.nodeName+"</a>";
	this.liNode[node.id] = div;
	var obj = this.liNode[node.parentId];
	if(obj != null&&typeof(obj)!="undefined") {
		if(div.id.substr(0,parent.idLength)==node.parentId) {
			div.style.display = "none";
		}
		obj.appendChild(div);
	}	
};

//判断该节点是否有父节点
tree.prototype.HasParent = function(node) {
	var last;
	for(var i=0;i<list.length;i++) {
		if(list[i].id == node.parentId) {
			node.hasparent = true;
		}
	}	
};

//判断该节点是否有子节点
tree.prototype.HasChild = function(node) {
	var last;
	for(var i=0;i<list.length;i++) {
		if(list[i].parentId == node.id) {
			node.hasChild = true;
		}
	}	
};

//start
tree.prototype.start = function() {
	for(var node in this.ulNode) {
		this.str.appendChild(this.ulNode[node]);
	}
	var tree = document.getElementById("treeDiv");
	tree.innerHTML = this.str.innerHTML;
};

//展开节点的方法
function expandChild(divId) {
	var arr = divId.split("_");
	if(arr.length==1) {
		arr[1] = arr[0];
	}
	var all = document.getElementsByTagName("div");
	for(var i=0; i<all.length; i++) {
		if(all[i].id.split("_")[0] == arr[1]&&all[i].className != "parent") {
			var fuck = document.getElementById(all[i].id);
			if(fuck.style.display == "none") {
				fuck.style.display = "block";
				fuck.parentNode.firstChild.src = "img/minus.gif";
			} else {
				fuck.style.display = "none";
				fuck.parentNode.firstChild.src = "img/plusbottom.gif";
			}
		}
	}
}

html部分：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>树</title>
<link rel="stylesheet" href="tree.css" type="text/css"/>
<script type="text/javascript" src="tree.js"></script>
</head>
<body>
<div id="treeDiv"></div>
<script type="text/javascript">
	var tr = new tree("我的树");
	tr.add("1","0","first","http://www.baidu.com","leftFrame");
	tr.add("2","0","second","http://www.baidu.com","leftFrame");
	tr.add("3","0","third","http://www.baidu.com","leftFrame");
	tr.add("4","1","forth","http://www.baidu.com","leftFrame");
	tr.add("5","1","fifth","http://www.baidu.com","leftFrame");
	tr.add("6","1","sixth","http://www.baidu.com","leftFrame");
	tr.add("7","4","sixth","http://www.baidu.com","leftFrame");
	tr.add("8","4","sixth","http://www.baidu.com","leftFrame");
	tr.add("9","6","sixth","http://www.baidu.com","leftFrame");
	tr.add("10","5","sixth","http://www.baidu.com","leftFrame");
	tr.add("11","5","sixth","http://www.baidu.com","leftFrame");
	tr.add("12","6","sixth","http://www.baidu.com","leftFrame");
	tr.add("13","2","sixth","http://www.baidu.com","leftFrame");
	tr.add("14","2","sixth","http://www.baidu.com","leftFrame");
	tr.add("15","3","sixth","http://www.baidu.com","leftFrame");
	tr.add("16","9","sixth","http://www.baidu.com","leftFrame");
	tr.add("17","14","sixth","http://www.baidu.com","leftFrame");
	tr.start();
</script>
</body>
</html>

css部分：
.parent {
	line-height:10px;
	font-size:15px;
	font-family:"Arial Rounded MT Bold";
	border:0px solid #000;
}
.child {
	margin-left:17px;
	border:0px solid #0000ff;
	margin-top:2px;
}

body {
	font-size:14px;
}
这个我也花了两天的时间写出来的，请各位高手帮我提出解决问题的办法，谢谢了

[/size]