How do you extract 'miles' from a Mapbox directions container and create separate container with miles?

Question

'I am trying to separate the Miles from a mapbox directions container to use in another area. I just downloaded mapbox and I am searching everywhere to find out how to see where the data is so I can extract it but I cant find help with it. This is my code. I found out how to extract the directions from the map container and now I want to extract the mileage from the directions container.'

var plugin = new MapboxDirections({
accessToken: mapboxgl.accessToken,
profile: "mapbox/driving"
}); 

//add direction plug in to an existing div 
document.getElementById('directions').appendChild(plugin.onAdd(map))
////////// THIS IS MY ATTEMPT BELOW TO GET MILES///////////////
document.getElementById('directions.routes[0].distance').appendChild(plugin.onAdd(map))      

//       
map.on('load',  function() {

plugin.setOrigin([-119.05717, 35.42026]); // can be address in form setOrigin("12, Elm Street,    NY")
plugin.setDestination([-119.149330, 35.382359]); // can be address

// THIS IS WHAT I TRIED TO GET MILES ////////////////////////////
var miles = directions.routes[0].distance;
alert(miles);


})
//

'I tried document.getElementById('directions.routes[0].distance').appendChild(plugin.onAdd(map)) but I dont know if I am even calling the right field because I dont know where to get all the fields to call.'

Mapbox directions: how to extract directions data from result

'I read this above post and tried what they posted....but failed to get any results from using the console.dir. And that could be because I am not using that right as well.' /// their post

'When "opening" the whole route object in the console (via console.dir) I see the directions data I am looking for:'

directions:Object destination:Object origin:Object routes:Array[2] 0:Object distance:10460 duration:862 geometry:Object steps:Array[26] ...

///