JavaScript client-side rendering
- At first create a HTML structure with a basic structure with a container div and an output div.
- The container div contains a heading, a button, and an output div where we show the dynamic content using the javascript rendering.
- In the javascript get the reference of the needed tags and elements. Because the JavaScript is used to handle user interaction and dynamically render content.
- Then attached an event listener to the button and handle the “click” event for update the content when the button is clicked.
- You can render and update the dynamic content by the help of javascript DOM (Document Object Model) manipulation.
Example : To demonsrtate the Client side rendering in JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>JavaScript Rendering Example</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 10rem;
}
#output {
padding: 20px;
background-color: #22cc22;
border: 1px solid #ccc;
width: 500px;
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-top: 30px;
color: #fff;
}
</style>
</head>
<body>
<div class="container">
<h2>Click the button to show the JavaScript rendering</h2>
<button class="btn">Click it</button>
</div>
<div id="output">
<!-- Content will be rendered here dynamically -->
</div>
<script>
let outputDiv = document.getElementById('output');
let btn = document.querySelector(".btn");
// Generate some dynamic content
let dynamicContent = "<h2>Welcome to JavaScript Rendering!</h2>";
dynamicContent += "<p>This content was rendered dynamically using JavaScript.</p>";
// Set the content of the output div to the dynamic content
btn.addEventListener("click", function () {
outputDiv.innerHTML = dynamicContent;
outputDiv.style.display = "block";
});
</script>
</body>
</html>
Output:
Output : JavaScript rendering
What is JavaScript Rendering ?
Javascript rendering refers to the process of dynamically updating the content of a web page using JavaScript. This process also known as client-side rendering, means that it generates Html content dynamically on the user’s web browser. In this tutorial, we will see the process of JavaScript rendering.
Preview
Contact Us