Write a simple JS tree, you can build object-oriented way of a tree. In this way, such as the following: 

var container = document.getElementById("treeContainer");  //
var tree = new Tree(container);
var rootItem1 = new TreeItem(tree,"node1","img/folder.gif","#",true);
var item11 = new TreeItem(rootItem1,"node1 1","img/file.png", "#");
var item12 = new TreeItem(rootItem1,"node1 2","img/file.png");

Results are as follows:

Javascript Tree



Complete code is as follows: 

<html>
<head>
<title>Tree Main</title>
<link rel="StyleSheet" href="tree.css" type="text/css">
<script type="text/javascript" src="tree.js"></script>
<script type="text/javascript">
window.onload = function() {
	var container = document.getElementById("treeContainer");
	var tree = new Tree(container);
	var rootItem1 = new TreeItem(tree,"node1","img/folder.gif","#",true);
	var item11 = new TreeItem(rootItem1,"node1 1","img/file.png", "#");
	var item12 = new TreeItem(rootItem1,"node1 2","img/file.png");
	
	var rootItem2 = new TreeItem(tree,"node2","img/folder.gif");
	var item21 = new TreeItem(rootItem2,"node2 1","img/folder.gif");
	var item211 = new TreeItem(item21,"node2 1 1","img/file.png");
	var item212 = new TreeItem(item21,"node2 1 2","img/file.png");
	var item22 = new TreeItem(rootItem2,"node2 2","img/file.png");
	
	var rootItem3 = new TreeItem(tree,"node3","img/file.png");
	
};
</script>

</head>

<body>

<div>
</div>

<br>
<br>
<div>
copyright 
</div>

</body>
</html>



Tree.js code: 

var tabSize = "20px";

function Tree(container) {
	if(!container)
		return;
	this.type = 0;
	this.component = document.createElement("div");
	container.appendChild(this.component);
	
	this.subs = new Array();
}

function TreeItem(parent,text,imgSrc,url,opened) {
	if(!parent)
		return;
	
	this.type = 1;
	this.parent = parent;
	
	this.opened = opened;
	if(this.opened == undefined) {
		this.opened = false;
	}
	
	this.component = document.createElement("div");
	if(this.parent.type && !this.parent.opened)
		this.component.style.display = "none";
	
	// img
	if(imgSrc) {
		this.img = document.createElement("img");	
		this.img.src = imgSrc;
		this.component.appendChild(this.img);
		this.img.parent = this;
		
		this.img.onclick = function() {
			var subs = this.parent.subs;
			if(this.parent.opened) {
				this.parent.opened = false;				
				for(var child in subs) {
					subs[child].component.style.display = "none";					
				}
			} else {
				this.parent.opened = true;
				for(var child in subs) {
					subs[child].component.style.display = "block";					
				}
			}
		}
	}
	
	// url and text
	if(url) {
		this.textNode = document.createElement("span");
		this.textNode.innerHTML = text;
		this.link = document.createElement("a");
		this.link.href = url;
		this.link.appendChild(this.textNode);
		this.component.appendChild(this.link);
	} else {
		this.textNode = document.createElement("span");
		this.textNode.innerHTML = text;
		this.component.appendChild(this.textNode);
	}
	
	this.component.style.paddingLeft = parent.type?tabSize:"0px";
	this.parent.component.appendChild(this.component);
	
	this.subs = new Array();
	this.parent.subs[this.parent.subs.length] = this;
}