Refactoring JavaScript: Separation of Concerns - Markup Code on JS Fix

html-on-js-fix-by-blue-imp.html

<script src="js/tmpl.min.js"></script>

<script type="text/x-tmpl" id="tmpl-specific-widget-x">
    <div id="specific-widget-x" class="specific-widget-x">
        <h2>{%=o.title%}</h2>
        <div class="specific-widget-x-body-classes">
            {%=o.text%}
        </div>
    </div>
</script>

<script type="text/javascript">
    let widgetData = {
        title: "My Widget",
        text: "JavaScript is Quirky",        
    };

    document.getElementById("widget-container").innerHTML = tmpl("tmpl-specific-widget-x", widgetData);
</script>