Dynamic HTML Using Handlebars JavaScript Last Updated : 13 Mar, 2024 Comments Improve Suggest changes Like Article Like Report The Dynamic HTML Using Handlebars JavaScript consists of creating the user interactive web pages by combining the HTML with the Handlebars templating engine. The Handlebars mainly ease the process of dynamically rendering the HTML content by allowing the insertion of variables, expressions, and logic directly in the markup. In this article, we will explore the process of rendering Dynamic HTML Using Handlebars JavaScript using practical examples. Dynamic HTML Using Handlebars JavaScriptSyntax for Dynamic HTML Using Handlebars JavaScript<script id="template" type="text/x-handlebars-template"> {{#each data}} <!-- HTML structure using Handlebars expressions {{}} --> {{/each}}</script>Approach to Render Dynamic HTML Using Handlebars JavaScript:Firstly, add the CDN Link of the Handlebars Templating Engine.Define the Handlebars template in the HTML file and then compiler and update the task list using the Handlebars. The template is then compiled using Handlebars.compile() and a set of tasks is maintained in JavaScript.There are functions to handle dynamic updates to the task list which shows the usage of Handlebars for creating data-driver HTML content. The template is rendered with updated data upon user interactions like adding, removing, or toggling tasks.Steps to Render Dynamic HTML Using Handlebars JavaScriptStep 1: Firstly, we will make the folder named root by using the below command in the VScode Terminal. After creation use the cd command to navigate to the newly created folder. mkdir rootcd rootStep 2: Now create the below Project Structure in your project, including app.js and index.html. Folder Structure:--root --index.html --script.jsExample: We need to write the code for the script.js file, and code for index.html to render Dynamic HTML Using Handlebars JavaScript. HTML <!DOCTYPE html> <html> <head> <title> Dynamic HTML Using Handlebars JavaScript </title> <style> body { font-family: 'Arial', sans-serif; margin: 20px; } h1 { color: green; } #taskInput { margin-bottom: 10px; } ul { list-style-type: none; padding: 0; } li { margin-bottom: 5px; } li span { margin-right: 10px; } button { cursor: pointer; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h3>Dynamic HTML Using Handlebars JavaScript</h3> <input type="text" id="taskInput" placeholder="Add a new task"> <button onclick="addTaskFn()">Add Task</button> <ul id="taskList"></ul> <script src= "https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"> </script> <script id="template" type="text/x-handlebars-template"> {{#each tasks}} <li> <input type="checkbox" {{#if completed}}checked{{/if}} onclick="toggTaskFn('{{id}}')"> <span> {{title}} </span> <button onclick="removeTaskFn('{{id}}')"> Remove </button> </li> {{/each}} </script> <script src="script.js"></script> </body> </html> JavaScript let tasks = [ { id: "1", title: "Python", completed: false }, { id: "2", title: "ReactJS", completed: true }, ]; const src = document.getElementById("template").innerHTML; const template = Handlebars.compile(src); function updateTaskList() { const html = template({ tasks }); document .getElementById("taskList").innerHTML = html; } function addTaskFn() { const newTaskTitle = document.getElementById("taskInput").value; const newTask = { id: Date.now().toString(), title: newTaskTitle, completed: false }; tasks.push(newTask); updateTaskList(); document.getElementById("taskInput").value = ""; } function removeTaskFn(taskId) { tasks = tasks.filter( task => task.id !== taskId ); updateTaskList(); } function toggTaskFn(taskId) { tasks = tasks.map(task => { if (task.id === taskId) { task.completed = !task.completed; } return task; }); updateTaskList(); } updateTaskList(); Output: Comment More infoAdvertise with us Next Article Dynamic HTML Using Handlebars JavaScript G gauravgandal Follow Improve Article Tags : HTML View Engine Similar Reads Design a Stock Market Dashboard using HTML CSS & JavaScript We will walk through the step-by-step process of designing a Stock Market Dashboard template using HTML, CSS, and JavaScript. This application will provide users with a dashboard interface where they can view a watchlist of stocks, search for specific stocks, and see detailed information about each 11 min read Dynamically Execute JavaScript in ElectronJS ElectronJS is an Open Source Framework used for building Cross-Platform native desktop applications using web technologies such as HTML, CSS, and JavaScript which are capable of running on Windows, macOS, and Linux operating systems. It combines the Chromium engine and NodeJS into a Single Runtime.I 7 min read How to Display Images using Handlebars in Node.js ? In this article, we will discuss how to display images using handlebars in Node.js. You may refer to this article for setting up handlebars View Engine in Node.jsApproachTo display images using Handlebars in Node.js, pass the image URLs to the template from your server. In the Handlebars template, u 3 min read How to create an ember handlebars template ? Ember uses the handlebars template library to modify the app's user interface. Handlebars are just like the HTML code but they give additional features to developers like adding expressions that can change the displaying page. We can use the other features of handlebars to get a clear idea of ember 2 min read How to separate Handlebars HTML into multiple files / sections using Node.js ? In this article, we will learn about separating Handlebars HTML into multiple files/sections using Node.js and using it on any page that you want. It helps in reducing the repetition of code. For example, instead of adding the whole navbar on each page, you can just make a template of that navbar an 3 min read Render dynamic content in Node using Template Engines In Node.js, the rendering of dynamic content using Templates like EJS, Handlebars, and Pug consists of embedding dynamic data and logic directly into the HTML files. In this article, we will use the EJS Template Engine to render dynamic content in Node.js using Templates. We will explore the practic 4 min read How to use Handlebars to Render HTML Templates ? Handlebars is a powerful template engine that allows us to create dynamic HTML templates. It helps to render HTML templates easily. One of the advantages of Handlebars is its simplicity, flexibility, and compatibility with various web development frameworks.These are the following methods:Table of C 5 min read How to get the Width of Scroll bar using JavaScript? Given an HTML document, the task is to get the width of the scrollbar using JavaScript. Approach:Create an element (div) containing a scrollbar.OffsetWidth defines the width of an element + scrollbar width.ClientWidth defines the width of an element.So scrollbar can be defined as width = offsetWidth 3 min read How to call a JavaScript Function from an onmouseover Event ? The onmouseover event in JavaScript is triggered when the mouse pointer moves onto an element, such as a button, image, or text. We will see how to call JavaScript function from an onmouseover event in various ways, like using the onmouseover Attribute and Using Event Listener. Table of Content Usin 2 min read How to pass Variable to inline JavaScript using EJS Template Engine? In the EJS templating engine, we can pass variables to inline JS within our HTML templates. We can use the '<%= variable %>' syntax, where we can embed server-side variables directly into the client-side scripts. In this article, we will explore the detailed process to pass a variable to inlin 2 min read Like