I have written the following codes, the purpose of these codes is to generate an <ul> from some javascript Node objects:
<html>
<body>
<div id='content'></div>
<script type='text/javascript'>
function node(name,parent){
this.name=name;
this.parent=parent;
this.level=function(){
if(this.parent==null)
return 0;
return this.parent.level()+1;
}
this.childs=new Array();
}
//create a rootNode, having no parent
var rootNode=new node('AAA',null);
//create node1 and add it to the child of rootNode
var node1=new node('BBB',rootNode);
rootNode.childs.push(node1);
//create node2 and add it to the child of rootNode
var node2=new node('CCC',rootNode);
rootNode.childs.push(node2);
//create node3 and add it to the child of node1
var node3=new node('DDD',node1);
node1.childs.push(node3);
//create node4 and add it to the child of node1
var node4=new node('EEE',node1);
node1.childs.push(node4);
//create node5 and add it to the child of node2
var node5=new node('FFF',node2);
node2.childs.push(node5);
function getTreeHTML(node,html){
if(node.level()==0)
html+='<ul>';
html+='<li>';
html+=node.name;
if(node.childs.length > 0){
html+='<ul>';
for(var i in node.childs){
html+=getTreeHTML(node.childs[i],html);
}
html+='</ul>';
}
html+='</li>';
if(node.level()==0)
html+='</ul>';
return html;
}
var treeHTML=getTreeHTML(rootNode,'');
document.getElementById('content').innerHTML=treeHTML;
</script>
</body>
</html>
Under rootNode, there are two immediate child nodes, for these two child nodes, one of them should have two childs children and another should have one child. I suspect there is a logical bug in the getTreeHTML() function but I just can't figure out what it is, feel free to paste the codes on http://htmledit.squarefree.com/, then you can quickly see what I mean.
Many thanks to you all.