Campos en arbol dinamicamente

[luqueagm]

CAMPOS EN ARBOL DINAMICAMENTE

¿como es posible hacerlo?. Tengo algo desarrollado pero no he podido generar una anidacion mas alla de la primera anidacion hija. Luego, al anidarla mas alla no puedo llegar a hacerlo... Mi interes sería ir creando anidaciones en primera categoria, y luego las sucesivas categorias que puedan ir naciendo en la medida que se eligen crearlas. Pero tambien que uno pudiese elegir qué categoria habria que crear libremente ....

Código PHP:

  <script>
function fnAppend(){
   var oNewNode = document.createElement("LI");
   oList.appendChild(oNewNode);
   oNewNode.innerText="List node 5";
 
    var oNewNode1 = document.createElement("UL");
           oList.appendChild(oNewNode1);
          oNewNode1.innerText="List node 111";
 
    var oNewNode2 = document.createElement("UL");
           oList.appendChild(oNewNode2);
          oNewNode2.innerText="List node 222";
 
 
 
   var oNewNode3 = document.createElement("LI");
   oList.appendChild(oNewNode3);
   oNewNode3.innerText="List node 333";
 
    var oNewNode4 = document.createElement("DL");
           oList.appendChild(oNewNode4);
          oNewNode4.innerText="List node 444";
 
    var oNewNode5 = document.createElement("DT");
    var oNewNode6 = document.createElement("DD");
           oList.appendChild(oNewNode5);
        oList.appendChild(oNewNode6);
          oNewNode5.innerText="List node 555";
        oNewNode6.innerText="List node 666";
 
 
    var oNewNode7 = document.createElement("dd");
           oList.appendChild(oNewNode7);
          oNewNode7.innerText=tuno.value;
 
    var oNewNode9 = document.createElement("ol");
           oList.appendChild(oNewNode9);
          oNewNode9.innerText="";
 
 
     var campo = document.createElement("input");
        campo.id = 'agregacampo000000000000000001'
           oList.agregacampo000000000000000001.appendChild(campo);
        campo.innerText=tuno.value;
 
 
    var espacio = document.createElement("dd");
           oList.appendChild(espacio);
          espacio.innerText="";
 
 
 
    var dd = document.createElement("dd");
           oList.appendChild(dd);
    var oNewNode8 = document.createElement("input");
           oList.appendChild(oNewNode8);
          oNewNode8.innerText="";
 
 
 
}
</script>
<body>
<ul ID = oList>
<input type="text" name="tuno" ID=agregacampo01 value ="ffffffffffffffff" />
<li>List node 1</li>
<li>List node 2</li>
<li>List node 3</li>
<li>List node 4</li>
 
</ul>
 
<input
   type = "button"
   value = "Append Child"
   onclick = "fnAppend()" />
 
 
 
 
 
 
</body>