flexbox, sass, vanilla javascript

Hello all. Wondering if I chose the best way to dynamically generate the HTML elements for the bar graph. I created a variable called barContainer with the HTML structure I wanted, then used template literals to fill the markup and change the styling of the actual bars, then looped through the json data and added barContainer to my graph with .innerHTML.

Would it have been a better idea to use .createElement for each html element of the graph and then use .appendChild to add the elements to my graph selector?

Trying to figure out the pros and cons between these two solutions.

Thanks for looking!