Steps to Render a Variable as HTML in EJS
Step 1: Create a backend server using the following command in your project folder.
npm init -y
Step 2: Install the necessary package in your server using the following command.
npm i express ejs
Project Structure:
The updated dependencies in package.json file will look like:
"dependencies": {
"express": "^4.18.2",
"ejs": "^3.1.9",
}
Example: Below is an example to render a variable as HTML in EJS.
HTML
<!DOCTYPE html><head> <title> <%= geeksData.title %> </title></head><body> <h1 style="color: green;"> <%- geeksData.title %> </h1> <p> <%= geeksData.description %> </p> <form action="/" method="post"> <label for="inputTitle">New Title:</label> <input type="text" id="inputTitle" name="inputTitle" required> <label for="inputDescription"> New Description: </label> <input type="text" id="inputDescription" name="inputDescription" required> <label for="inputUrl">New URL:</label> <input type="url" id="inputUrl" name="inputUrl" required> <button type="submit">Update Data</button> </form> <hr> <h2>Updated Data</h2> <p>Title: <%= userGeeksData.title || "No data provided" %> </p> <p>Description: <%= userGeeksData.description || "No data provided" %> </p> <p>URL: <%= userGeeksData.url || "No data provided" %> </p></body></html> |
Javascript
const express = require('express');const bodyParser = require('body-parser');const app = express();const port = 3000;app.set('view engine', 'ejs');app.use(bodyParser.urlencoded({ extended: true}));let data = { title: 'w3wiki', description: 'A computer science portal for geeks',};let gfgData = {};app.get('/', (req, res) => { res.render('index', { geeksData: data, userGeeksData: gfgData });});app.post('/', (req, res) => { gfgData = { title: req.body.inputTitle, description: req.body.inputDescription, url: req.body.inputUrl, }; res.redirect('/');});app.listen(port, () => { console.log(`Server is running at http://localhost:${port}`);}); |
To run the application, we need to start the server by using the below command.
node app.js
Output:
How to Render a variable as HTML in EJS ?
In the EJS, the rendering of a variable as HTML consists of a specific tage through which we can control how the content is displayed. This tag involves, <% code %> that allows the execution of code without rendering, <%= code %> escapes and prints the code as HTML, while <%- code %> renders the code as HTML without escaping special characters. In this article, we will see the practical implementation using these tags to Render a variable as HTML in EJS.