Using JS Destroydrop tree - http://destroydrop.com/javascripts/tree/ .CSS & .JS

It is simple to have rendered tree when the data for the tree is hardcoded in the html file. data example:

<div class="dtree">

<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>

<script type="text/javascript">
    <!--

    d = new dTree('d');

    d.add(0,-1,'My example tree');
    d.add(1,0,'Node 1','example01.html');
    d.add(2,0,'Node 2','example01.html');
    d.add(3,1,'Node 1.1','example01.html');
    d.add(4,0,'Node 3','example01.html');
    d.add(5,3,'Node 1.1.1','example01.html');
    d.add(6,5,'Node 1.1.1.1','example01.html');
    d.add(7,0,'Node 4','example01.html');
    d.add(8,1,'Node 1.2','example01.html');
    d.add(9,0,'My Pictures','example01.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
    d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');
    d.add(11,9,'Mom\'s birthday','example01.html');
    d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif');

    document.write(d);

    //-->
</script>

The tree has to be re-rendered with dynamic ajax data.
Fetching the data dynamically means the single line is fetched from api, this is already done:

    d = new dTree('d');
    d.add(0,-1,'My example tree');
    d.add(1,0,'Node 1','example01.html');
    d.add(2,0,'Node 2','example01.html');
    document.write(d); <---- the is feteched from the API, if written in console then the entire page goes blank, and then the tree is displayed on the blank page.
    .....

How can this data be added dynamically?

I have tried:

• giving and id to the script tag, and using the js getElementByID.innerHTML();
• same as above with the required comment tags
• using the eval() function

c. the required comment tags inside the script make this a bigger challenge: