Script output not showing on page

I'm going slighty mad here. I am pretty new to javascript but I have worked alittle with it. But I dont understand why my code acts in this way. I want to have a tree view on my page. So i searched and found destroydrop's tree menu and I though this is perfect. First i have to import a script, ok. And than all the code that is required to get an output is this:

d = new dTree('d');
d.add(0,-1,'My example tree');
document.write(d);

That code generates this:

<div class="dtree">
<div class="dTreeNode">
<img id="id0" src="img/base.gif" alt="">My example tree
</div>
</div>


and displays a root node on the page with an icon and some text.

What I want is to be able to add nodes dynamically, but i can't get it to work. If we take this simple example that I wrote:

function addNode(){

var d = new dTree('d');
d.add(0,-1,'My example tree');

var span = document.createElement("span");
span.innerHTML = d;

var el = document.getElementById("dtree");

el.appendChild(span);
}


and connects that function to a button, I get the exact same output:

<span>
<div class="dtree">
<div class="dTreeNode">
<img id="id0" src="img/base.gif" alt="">My example tree
</div>
</div>
</span>



except the span-tag. But my tree is never showing. If I copy this code, including the span-tags and paste it into my html document it works like a charm. But why wont it show when I press the button.