Many local directory tree will be used, such as CSDN Forum list, the code so there are many, many people are used, and does not have its own hands to be a below and I shared with them how to own an XML TreeMenu do data sources.    You will see from the many useful JS script and the number of page elements was important but often overlooked attributes we use. 

  Step1. Upside, after the completion of TreeMenu see what look like? 

  JS dynamically generated html script outline, that is dynamically generated page source code, no <div id = "MyDiv"> 
  <span Class="hasItems" id="csxmlTree" style="MARGIN-LEFT: 0px" text="根目录" expanding="true" target treeId> 
  <img Src="images/contract.gif"> root directory </ span> <br> 
  <span Style="DISPLAY: none"> <span class="hasItems" id="csxmlTree" style="MARGIN-LEFT: 16px" text="目录1" expanding="false" target treeId="1000"> 
  <img Src="images/contract.gif"> Contents 1 </ span> <br> 
  <Span class = "Items" id = "csxmlTree" style = "MARGIN-LEFT: 32px" text = "Directory 1.1" expanding = "false" target treeId = "2000" href = "javascript: alert (this.innerHTML); "> 
  <img Src="images/endnode.gif"> directory 1.1 </ span> <br> 
  <span Class="Items" id="csxmlTree" style="MARGIN-LEFT: 32px" text="目录1.2" expanding="false" target="_blank" treeId="2001" href="1.htm"> 
  <img Src="images/endnode.gif"> directory 1.2 </ span> <br> 
  <span Class="hasItems" id="csxmlTree" style="MARGIN-LEFT: 16px" text="目录2" expanding="false" target treeId="3000"> 
  <img Src="images/contract.gif"> directory 2 </ span> <br> 
  <span Class="Items" id="csxmlTree" style="MARGIN-LEFT: 32px" text="目录2.1" expanding="false" target treeId="3001"> 
  <img Src="images/endnode.gif"> directory 2.1 </ span> <br> 
  <span Class="Items" id="csxmlTree" style="MARGIN-LEFT: 32px" text="目录2.2" expanding="false" target treeId="3002"> 
  <img Src="images/endnode.gif"> directory 2.2 </ span> <br> 
  <span Class="Items" id="csxmlTree" style="MARGIN-LEFT: 32px" text="目录2.3" expanding="false" target treeId="3003"> 
  <img Src="images/endnode.gif"> directory 2.3 </ span> <br> 
  <span Class="Items" id="csxmlTree" style="MARGIN-LEFT: 32px" text="目录2.3" expanding="false" target treeId="3004"> 
  <img Src="images/endnode.gif"> directory 2.3 </ span> <br> 
  <span Class="hasItems" id="csxmlTree" style="MARGIN-LEFT: 16px" text="目录3" expanding="false" target treeId="4000"> 
  <img Src="images/contract.gif"> directory 3 </ span> <br> 
  <span Class="Items" id="csxmlTree" style="MARGIN-LEFT: 32px" text="目录3.1" expanding="false" target treeId="4001"> 
  <img Src="images/endnode.gif"> directory 3.1 </ span> <br> 
  <span Class="Items" id="csxmlTree" style="MARGIN-LEFT: 16px" text="目录4" expanding="false" target treeId="5000"> 
  <img Src="images/endnode.gif"> directory 4 </ span> <br> 
  </ Span> 
  </ Div> 

  The above code is not seem been tumultuous ones?    Is not, and you put it into your FP visualization tools, such as the code inside, we can see the structure.    In fact, is very simple. span website Tag generates a nested grid structure.    We then write the script JS reader is the main purpose of XML documents and generate such a structure.    So this is the key, you must see to understand.    It may wish to first deposit into a Web page, look at the effect (note that the copy intact, it can only Display the "root directory" A, you need to change the local blue, none removed), in addition to other red DIV JS script are dynamically generated.    Class = "Items" and the class = "hasItems" is similar to the style sheets: 

  See yellow part of the style sheet can understand Tree is on the formal structure of this definition from the left to achieve the desired effect, through the tightening of different, this will clearly come out of the tree structure. 

  Next to write scripts must be done by a certain method to the above-mentioned elements to construct the HTML code.    They carefully to the above understood, as we started!    !    !