zamiana innerHTML - > DOM

Czesc,
mam prosbe - potrafilby ktos przeksztalcic ponizszy kawalek kodu z innerHTML na kod ze struktura DOM

function draw(start) {
var index = 1;
if (start == 1) str = "";
str += "

• ";
  while (index <= warunek) {
  if (warunek2) str += "
• napis";
  else {
  str += "
• napis2"
  draw();
  }
  index++;
  }
  str +="

draw(1);

bede wdzieczny za pomoc :>

Poniżej masz przykład, pokombinuj sam.

<script>
function addElm(elm, tag) { 
  return elm.appendChild(document.createElement(tag)); 
}
function addText(elm, text) { 
  return elm.appendChild(document.createTextNode(text)); 
}
function getElm(id) { 
  return document.getElementById(id); 
}
onload = function() {
  var ul = getElm('test');
  addText(addElm(ul, 'li'), 'napis');
  addText(addElm(ul, 'li'), 'napis');
  addText(addElm(ul, 'li'), 'napis');
}
</script>
<div id="test"></div>

thx piechnat za odp, ale nie moge sobie poradzic z wstawieniem linku do listy, tj

link = addElm(getElm('test'), 'a');
link.href = 'http://www.cos.pl';
addText(link, 'click'); // wszystko ok

addText(addElm(getElm('test'), 'li'), 'napis1');

chcialbym, aby zamiast napis1 pojawil sie link click, kto pomoze ??

var ul = addElm(getElm('test'), 'ul');
var li = addElm(ul, 'li');
var link = addElm(li, 'a');
addText(link, 'click');
link.href = 'http://www.cos.pl';

wszystko ok, dzieki

To juz moje ostatnie pytanie :)

    var ul = addElm(getElm('test'), 'ul');
    var li = addElm(ul, 'li');
    var link = addElm(li, 'a');
    addText(link, 'click');
    link.href = 'javascript:fun('+ul+')';

dlaczego, jezeli wywoluje funkcje fun, to wyskakuje blad 'brak definicji object' i co zrobic, aby jednak mozna bylo przeslac obiekt ul, bo jest mi to potrzebne ??

można np:

link.href = 'javascript:void(0)';
link.onclick = function(){
  fun(ul);
}