como crear un arbol en tiempo de ejecucion con jquery o javascript??????

hola de nuevo un saludo...

me encuentro en la necesidad de crear un arbol gerarquico pero en tiempo de ejecucion con jquery.. o javaScript..

alguien conoce algún plugin..

de antemano graciasss....
gracias por responder pero creo que no me explique vien..

necesito hacer un treeview en tiempo de ejecución..
osea una especie de lista
algo asi:
<ul id="browser" class="filetree">
<li><span class="folder">Folder 1</span>
<ul>
<li><span class="file">Item 1.1</span></li>
</ul>
</li>
<li><span class="folder">Folder 2</span>
<ul>
<li><span class="folder">Subfolder 2.1</span>
<ul id="folder21">
<li><span class="file">File 2.1.1</span></li>
<li><span class="file">File 2.1.2</span></li>
</ul>
pero generando las ul y las li en timpo de ejecucion ya sea con jquery o javascript..

aa y desgraciadamente para mi el ingles no se me da mucho...
Aaaaaaaaah, aún sigues con tu explorador de archivos :P. Acabo de ver que te serviría el libro, pero me dices que "no se te da mucho el inglés", ¿aún así lo quieres?

Con jQuery es simple, solo debes tener un div que contenga el navegador con un ID (y este ID no se debería repetir en ningún otro elemento):

<div id="list">
</div>

Cada vez que muestres el contenido de una carpeta, creas una lista y la muestras añades al div con jQuery:

// Asumiendo que la lista se haya creado anteriormente.
$(lista).appendTo($('#list'));

Al final le das estilo con CSS para darle aspecto de Navegador de Archivos.

Ahora, cómo crear la lista, eso te lo mostré en el otro post :P.

Saludos.
jajajajaja... si sigo con lo de mi explorador jajaja... ya tengo esto que es básicamente tu ejemplo con mis modificaciones.. si me puedes ayudar seria algo genial..
al principio me muestra solo las unidades que pueden ser lee-idas luego si presiono en una unidad me muestra todo el contenido de la unidad.. pero si presiono en una carpeta de esa unidad ya no me muestra nada... yebo ya varios días buscándole y no puedo hacer nada... el código de ejemplo es este....

<html>
<head>
<title>Using DOM to create HTML</title>
<style>
ul { color:green; margin:5px; cursor:pointer; }
li { color:red; margin:5px; cursor:pointer; }
p { color:blue; margin:5px; cursor:pointer; }
p:hover { background:yellow; }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
var entradas = 0;
var countLi = "";
var html = "";
var ul = 1;
var li = 1;
//-----------------------------------------------------------------------------------------------
$(document).ready(function() {
$('#myDiv').append(drives());

//$("ul").click(openFolder);
$("ul li").live('click',openFolder);

/*function() {
var oID = $(this).attr("id");
});*/

});

function drives() {
var content = '';
//var bytesPerGB = 1024 * 1024 * 1024;
var fso = new ActiveXObject("Scripting.FileSystemObject");
var e = new Enumerator(fso.Drives);
e.moveFirst();

while (!e.atEnd()) {
var drv = e.item();
//content += "<p>";

if (drv.IsReady) {
var uls = $('<ul/>').attr('id',drv.DriveLetter).appendTo('#myDiv');
//alert(drv.DriveLetter); // New <li> elements are created here and added to the <ul> element.
var lis = $('<li/>').attr('id',drv.DriveLetter).appendTo("#"+drv.DriveLetter);
lis.append(drv.DriveLetter );
content += drv.DriveLetter ;
} else {
//content += "Not Ready";
}

//content += "</p>";

e.moveNext();
}

content += content;
}

function openFolder() {

var oID = $(this).attr("id");
alert("primera Ruta oID es " + oID);
var newLine = "<br />";

if (oID=="C" || oID=="D" )
{//cuando entra la primera ves hace esto......
var fso = new ActiveXObject("Scripting.FileSystemObject");
var oID2 = oID + ':\\';
var fldr = fso.GetFolder(oID2);
alert("segunda Ruta oID2 es " + oID2);
for (f = new Enumerator(fldr.subFolders); !f.atEnd(); f.moveNext())
{
// New <li> elements are created here and added to the <ul> element.
var lis = $('<li/>').attr('id',oID2+f.item().Name).css('color','blue').appendTo('#'+oID);
lis.append(f.item().Name);

//var aler = lis.append(f.item().Name);
//alert("Ruta final para cuando click en C O D es " + oID2 + f.item().Name);
//s += f.item().Name + "<br>";
}
for (g = new Enumerator(fldr.Files); !g.atEnd(); g.moveNext())
{
// New <li> elements are created here and added to the <ul> element.
var lis = $('<li/>').attr('id',oID2+g.item().Name).css('color','green').appendTo('#'+oID);
lis.append(g.item().Name);
//s += f.item().Name + "<br>";
}
entradas++;
} else if (entradas>0)
{/// ya que estan los folders y ase nuevamente click hace esto....
var fso = new ActiveXObject("Scripting.FileSystemObject");
var oID2 = oID + '\\';
var fldr = fso.GetFolder(oID2);
alert("segunda bes que clikeo Ruta es " + oID2);
for (f = new Enumerator(fldr.subFolders); !f.atEnd(); f.moveNext())
{
//var uls = $('<ul/>').attr('id',oID2+f.item().Name).css('color','orange').appendTo('#'+oID);
//uls.append(f.item().Name);
// New <li> elements are created here and added to the <ul> element.

var lis = $('<li/>').attr('id',oID2+f.item().Name).appendTo('#'+oID);
lis.append(f.item().Name);
//var aler = lis.append(f.item().Name);*/
alert("con esta Ruta se guarda --- " + oID2+f.item().Name);
//s += f.item().Name + "<br>";
}
for (g = new Enumerator(fldr.Files); !g.atEnd(); g.moveNext())
{
// New <li> elements are created here and added to the <ul> element.
var lis = $('<li/>').attr('id',oID2+g.item().Name).css('color','orange').appendTo('#'+oID);
lis.append(g.item().Name);
//s += f.item().Name + "<br>";
}
entradas++;
//alert(" tercera esto es cuando clikeo la segunda ves " +oID)
}


return content;
}

</script>

</head>
<body>
<div id="myDiv"></div>
<script type="text/javascript">//document.write(drives());
</script>
</body>

</html>
utilizo la version 9..

ya logre hacerlo pero en la única carpeta que no realiza la búsqueda es en la de Archivos de programa en todas las de mas si.. no se si se este protegida contra escritura o lectura pero en esa carpeta me esta dando problemas

este es el código resultante:
<html>
<head>
  <title>Using DOM to create HTML</title>
   <style>
   ul { color:green; margin:5px; cursor:pointer; }
  li { color:red; margin:5px; cursor:pointer; }
  p { color:blue; margin:5px; cursor:pointer; }
  p:hover { background:yellow; }
  </style>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
   <script src="http://code.jquery.com/jquery-latest.js"></script>
   <script type="text/javascript" src="jquery-1.3.2.js"></script>
    <script type="text/javascript">
    var entradas = 0;
    var countLi = "";
    var html = "";
    var ul = 1;
    var li = 1;
    [B][COLOR="#FF0000"] var directorioArchivo = 'C:\\Users\\Test.txt';[/COLOR][/B][U][COLOR="#0000FF"]//esta linea es para crear un archivo de texto para ver el orden en que guardan los archivos
//es necesaria porque mas abajo en el código hago referencia a esa variable [/COLOR][/U]
        var fso2 = new ActiveXObject("Scripting.FileSystemObject");
        var s;
    //-----------------------------------------------------------------------------------------------
    $(document).ready(function() {
        $('#myDiv').append(drives());
        
       //$("ul").click(openFolder);
        $("ul li").live('click',openFolder);
 
       /*function() {
                var oID = $(this).attr("id");
                });*/
        
      });
      
      function drives() {
        var content = '';
        //var bytesPerGB = 1024 * 1024 * 1024;
        var fso = new ActiveXObject("Scripting.FileSystemObject");
        var e = new Enumerator(fso.Drives);
        e.moveFirst();
        var uls = $('<ul/>').attr({'id':'ul'}).appendTo('#myDiv');
        uls.append("My Local PC");
       
        if(fso.FileExists(directorioArchivo)) 
        {
          fso2.DeleteFile(directorioArchivo);
          s = fso2.CreateTextFile(directorioArchivo,8,true);
          s.WriteLine("este es un UL con ID = ul");
          s.Close();
        }else{
          s = fso2.CreateTextFile(directorioArchivo,8,true);
          s.WriteLine("este es un UL con ID = ul");
          s.Close();
        }
        while (!e.atEnd()) {
          var drv = e.item();
          //content += "<p>";
          
          if (drv.IsReady) {
            
                       //alert(drv.DriveLetter);                        // New <li> elements are created here and added to the <ul> element.
                        var lis = $('<li/>').attr({'id':drv.DriveLetter}).appendTo("#ul");
                         lis.append(drv.DriveLetter );
                         s = fso2.OpenTextFile(directorioArchivo,8,false,-1);
                         s.WriteLine("este es un LI con ID = "+drv.DriveLetter);
                         s.Close();
                       

            content += drv.DriveLetter ;
          } else {
            //content += "Not Ready";
          }
          
          //content += "</p>";

          e.moveNext();
        }
        
        content += content;
      }
      
      function openFolder() {
        
        var oID = $(this).attr("id");
       
        var oIDText = $(this).text();
       
        
       // alert("ruta para hacer la busqueda es " + oID); 
        var uls = $('<ul/>').attr({'id':'ulsub'+oID}).appendTo('#'+oID);
        //uls.append("este es un sub ul de "+oID);
         entradas++;
      if (oIDText=="C" || oIDText=="D" || oIDText=="G")
      {//cuando entra la primera ves hace esto......
         alert("el id en C: o D: es " + oID);
        var fso = new ActiveXObject("Scripting.FileSystemObject");
        var oID2 = oID + ':\\';
        alert("ruta para hacer la busqueda 1 es " + oID2); 
        var fldr = fso.GetFolder(oID2);
        

            for (f = new Enumerator(fldr.subFolders); !f.atEnd(); f.moveNext()) 
               { 
                //alert("el texto del elemento clikeado es  " + f.item().Name);

                        var idFinal = f.item().Name.replace(/\ /g,'_');alert(idFinal); 
                            //idFinal = f.item().Name.replace(/\./g,'PunNtOZhePAraDorSH');                       
                            oID2 = oID2.replace(/\:/g,'SeparadorDePuntos');
                            oID2 = oID2.replace(/\\/g,'VaRraZeparaDouRha');
                            oID2 = oID2.replace(/\./g,'PunNtOZhePAraDorSH');
                        var lis = $('<li/>').attr({'id':oID2+idFinal}).css('color','blue').appendTo('#ulsub'+oID);
                       lis.append(f.item().Name); 
                        s = fso2.OpenTextFile(directorioArchivo,8,false,-1);
                         s.WriteLine("este es un LI con ID = "+oID2+idFinal+" ***Que pertenece al <LI>disco "+oID);
                         s.Close();                                     
               }
             for (g = new Enumerator(fldr.Files); !g.atEnd(); g.moveNext()) 
               { 
               
                        var lis = $('<li/>').attr({'id':oID2+g.item().Name}).css('color','green').appendTo('#ulsub'+oID);
                         lis.append(g.item().Name);
                              
               }    
            
      }
       else if (entradas>0)
      {
      /// ya que estan los folders y ase nuevamente click  hace esto....
        alert("el id EN entradas > 0 es " + oID);
         var uls = $('<ul/>').attr({'id':'ulsub1'+oID}).appendTo('#'+oID);
        //alert("el padre de este nodo es  " + parentEls);
        var oID2 = oID.replace(/\SeparadorDePuntos/g,':');
            oID2 = oID2.replace(/\VaRraZeparaDouRha/g,'\\');
            oID2 = oID2.replace(/\PunNtOZhePAraDorSH/g,'.');
            oID2 = oID2.replace(/\_/g,' ');       
        //var oID3 = oID3.replace(/\_/g,' ')
        var fso = new ActiveXObject("Scripting.FileSystemObject");
            oID2 = oID2 + '\\'; 
         alert("ruta para hacer la busqueda2 es " + oID2); 
        var fldr = fso.GetFolder(oID2);

       // alert("ruta para buscar es " + oID2);
        for (f = new Enumerator(fldr.subFolders); !f.atEnd(); f.moveNext()) 
               { 
                var id = f.item().Name;alert(id);
                var idFinal="";
                for ( i = 0; i < id.length; i++ )
                 {
                  if (id.charAt(i) == " "  )
                   {
                    idFinal += id.charAt(i).replace(/\ /g,'_'); alert(idFinal);
                  }else if ( id.charAt(i) == "." ){
                     idFinal += id.charAt(i).replace(/\./g,'PunNtOZhePAraDorSH');alert(idFinal);
                  }else {
                     idFinal += id.charAt(i);
                  }
                }
                    
                        //idFinal = f.item().Name.replace(/\./g,'PunNtOZhePAraDorSH');    
                        oID2 = oID2.replace(/\:/g,'SeparadorDePuntos');
                        oID2 = oID2.replace(/\\/g,'VaRraZeparaDouRha');
                        oID2 = oID2.replace(/\./g,'PunNtOZhePAraDorSH');
                        oID2 = oID2.replace(/\ /g,'_');             
                    var lis = $('<li/>').attr('id',oID2+idFinal).appendTo('#ulsub1'+oID);
                        lis.append(f.item().Name);
                       s = fso2.OpenTextFile(directorioArchivo,8,false,-1);
                         s.WriteLine("este es un Sub LI con ID = "+oID2+idFinal+" ***Que pertenece al <LI>disco "+oID);
                         s.Close(); 
                           //alert("con esta Ruta se guarda --- " + oID2+f.item().Name);
                                  
               }
             for (g = new Enumerator(fldr.Files); !g.atEnd(); g.moveNext()) 
               { 
                 
                        var lis = $('<li/>').attr('id',oID2+g.item().Name).css('color','orange').appendTo('#ulsub1'+oID);
                         lis.append(g.item().Name);
                                  
               }    
             entradas++;
             
      }

        
        return content;
      }

    </script>

  </head>
  <body> 
    <div id="myDiv"></div>    
 <script type="text/javascript">//document.write(drives());
 </script>
  </body>

</html>
¿Te muestra algún error al ejecutar el script? Por si no lo sabes, presionando F12 puedes ver las herramientas para desarrolladores en IE9.