How to use a custom template when extending the L.Control function? - leaflet

Question

When creating Leaflet maps, I currently programmatically add my menus and legends by extending the L.Control like so:
var overlaysMenuCtrl = L.Control.extend({
onAdd: function(map){
var container = L.DomUtil.create('div', 'legend');
container.innerHTML = '<div id="mainMenu"><ul><li>blah</li></ul>';
return container;
}
});
The problem is that my custom menus are massive and I hate having to write the innerHTML code like that.
Is there a way to use some kind of template from another file and write the code there and then call the variable like so:
container.innerHTML = myMenuTemplate;
Then, the template could be like:
<div>
<ul>
<li>A list item</li>
<li>and so on...</li>
</ul>
</div>
The problem is that if I do the above method, I have to minify and remove line breaks/white space/etc in the code and makes it rather tedious everytime I make updates. Thanks for any tips!

Answer 1

I would suggest Mustache for javascript
The script is available on CDN
<script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.1/mustache.min.js" type="text/javascript"></script>
You can easily find some tutorials.
Here is an example with your data
EDIT:
Templates are useful to separate views and data.
If you don't really need templating but only an easy way to write your menus, you can just write them in invisible html elements that you access with
document.getElementById('menu1').innerHTML