Getting Navigation Items using Javascript - Issue with Displaying them

Question

I have a function that spits out the Parent navigation node along with the Child navigation node. This function:

function printNodesInfo(nodes){
nodes.get_data().forEach(function(node){
    var childNodes = node.get_children();
   console.log(String.format('Parent Title: {0} | Url: {1}',node.get_title(), '<a href='+node.get_url()+'>View</a>'));

    childNodes.get_data().forEach(function(childNode){
       console.log(String.format('- Child Title: {0} | Url: {1}',childNode.get_title(),childNode.get_url())); 
    });
}); 

}

spits out this in console

Parent Title: Documents | Url: hidden

• Child Title: Summit | Url: hidden

Parent Title: Lists | Url: hidden

• Child Title: List 1 | Url: hidden

I want to display the results in a div on one of my html files. Each time I try

document.getElementById('my-id').innerHTML += (String.format('Parent Title: {0} | Url: {1}',node.get_title(), '<a href='+node.get_url()+'>View</a>'));
document.getElementById('my-id2').innerHTML += (String.format('- Child Title: {0} | Url: {1}',childNode.get_title(),childNode.get_url())); 

I get all my navigation nodes but the child node sits at the bottom of all my parent navigation items. How can I display them in the same fashion as they get displayed in my console.log().

Thanks in advanced.

Answer 1

Figured it out.

The solution was to target the same div, not two different divs inside of the document.getElementById('').innerHTML.