how to grow the ul and ol list elements of a tree using javascript

Question

I have to make a tree such that it allows the list to be generated dynamically just by clicking on it.for example

o 1
o 2
o 3

if in this, I click on 1 , a sub node should be created may be 11.clicking on the 1 again will create may be 22.

o 1
  o 11
  o 22
o 2
o 3

this process will be repeated how many times I will click on the element. one scenario may be like this.

o 1
  o 11
     o 111
     o 222
     o 333
  o 22
  o 33
     o 111
     o 222
     o 333

I have absolutely no idea of jquery framework as I have never worked on that syntax all I understand that too a little about javascript. can you guide me regarding in this direction so that i may integrate in the project which is like this.

I have to generate knowledge based help module which contains several folder list which itself contains folders and each folder has data to be shown to the agent.

for ex

folder1
      folder1.1
      folder1.2
      folder1.3
      folder1.4
               folder1.4.1
               folder1.4.2
               folder1.4.3
      folder1.5

this structure would be shown using tree data structure, each folder contains the data. This folder structure would grow/ can grow dynamically.

Answer 1

No idea what use this is to anyone, but here's a commented step–by–step version:

function foo(e) {

  // Create a new LI
  var newLi = document.createElement('li');

  // Get the element that the click came from
  var el = e.target || e.srcElement;

  // Get it's parent LI if there is one
  var p = getParent(el);
  if (!p) return;

  // Get child ULs if there are any
  var ul = p.getElementsByTagName('ul')[0];

  // If there's a child UL, add the LI with updated text
  if (ul) {

    // Get the li children ** Original commented line was buggy 
//    var lis = ul.getElementsByTagName('li');
    var lis = ul.childNodes;

    // Get the text of the last li
    var text = getText(lis[lis.length - 1]);

    // Update the innerText of the new LI and add it
    setText(newLi, text.replace(/\.\d+$/,'.' + lis.length));
    ul.appendChild(newLi);

  // Otherwise, add a UL and LI  
  } else {
    // Create a UL
    ul = document.createElement('ul');

    // Add text to the new LI
    setText(newLi, getText(p) + '.0');

    // Append the new LI to the new UL
    ul.appendChild(newLi);

    // Add the UL
    p.appendChild(ul);

  }

  function getParent(el) {
    var tagName;

    while (el) {
      tagName = el.tagName.toLowerCase()
      if (tagName == 'li') {
        return el;
      } else if (tagName == 'ul') {
        return;
      }
      el = el.parentNode;
    }
  }

  function getText(el) {
    return el.textContent || el.innerText;
  }

  function setText(el, text) {
    if (typeof el.textContent == 'string') {
      el.textContent = text;
    } else if (typeof el.innerText == 'string') {
      el.innerText = text;
    } else {
      el.innerHTML = '';
      el.appendChild(document.createTextNode(text));
    }
  }
}

Some HTML to make it work:

<ul onclick="foo(event)">
  <li>0</li>
  <li>1</li>
  <li>2</li>
</ul>

Tested in Safari 5.1.5, Firefox 3.5.6, IE 6 so should work pretty much anywhere.