Make Dtree dynamic with jquery

Make Dtree dynamic with jquery

I have this code
[code]
<html>
<head>

<link rel="StyleSheet" href="dtree/dtree.css" type="text/css" />
<script type="text/javascript" src="dtree/vertdtree.js"></script>

<script type="text/javascript">

function addElement() {

var mytree = document.getElementById("mytree");

mytree.add(158, 150, 'testteam_index.asp?groupe_id=154', 'Zend Studio', '', '');
document.write(mytree); //refresh werkt ook niet omdat object leeg is
}

</script>
</head>

<body>
<h1>Horizontal Tree Example</h1>
<br>
<script language=javascript>
mytree = new dTree('mytree');

mytree.add(146, -1, 'Designers', 'team_index.asp?groupe_id=146', 'Designers', '', '');
mytree.add(145, -1, 'Developers', 'team_index.asp?groupe_id=145', 'Developers', '', '');
mytree.add(148, 145, 'Desktop Developers', 'team_index.asp?groupe_id=148', 'Desktop Developers', '', '');
mytree.add(147, 145, 'Web Developers', 'team_index.asp?groupe_id=147', 'Web Developers', '', '');
mytree.add(149, 147, 'Asp.net Developers', 'team_index.asp?groupe_id=149', 'Asp.net Developers', '', '');
mytree.add(151, 149, 'Asp.net 1.0', 'team_index.asp?groupe_id=151', 'Asp.net 1.0', '', '');
mytree.add(152, 149, 'Asp.net 1.1', 'team_index.asp?groupe_id=152', 'Asp.net 1.1', '', '');
mytree.add(153, 149, 'Asp.net 2.0', 'team_index.asp?groupe_id=153', 'Asp.net 2.0', '', '');
mytree.add(150, 147, 'PHP Developers', 'team_index.asp?groupe_id=150', 'PHP Developers', '', '');
mytree.add(154, 150, 'Zend Studio', 'team_index.asp?groupe_id=154', 'Zend Studio', '', '');

document.write(mytree);
</script>

<input type="button" value="Click Here" onClick="addElement();">
</body>
</html>
[/code]
This is very good to create a nice tree. See http://www.destroydrop.com/javascripts/tree/example/ for an example.

I want to make this tree dynamic. So when I click the button I want to add a node to the tree. I want to use jquery to do that.

Can someone put me in the right direction?