HTML

handlebar js basic example

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js" integrity="sha512-RNLkV3d+aLtfcpEyFG8jRbnWHxUqVZozacROI4J2F1sTaDqo1dPQYs01OMi1t1w9Y2FdbSCDSQ2ZVdAC8bzgAg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script id="introduction-template" type="text/x-handlebars-template">
    <p>Hello, my name is {{name}}!</p>
</script>
<script>
    // grab the source
    const source = document.querySelector("#introduction-template").innerHTML;
    // compile it using Handlebars
    const template = Handlebars.compile(source);
    // create context
    const context = {
        name: "Sabe"
    };
    // get the HTML after passing the template the context
    const html = template(context);
    // get the element to set the new HTML into
    const destination = document.querySelector(".introduction");
    // set the new HTML
    destination.innerHTML = html;
</script>