Introduction

Creating an HTML webpage dynamically using JavaScript is a powerful technique that allows you to build web applications with interactive and responsive user interfaces. In this article, we'll take you through the process of creating an HTML webpage dynamically using JavaScript.

Javascript

What is HTML?

Hypertext Markup Language is a markup language used to create and structure web pages on the internet. HTML was developed by Tim Berners Lee in 1993. HTML is a language that web browsers understand and is used to display text, images, audio, and video on the web. Nowadays, HTML is the basic building block for any website that we see on the internet. Hence, it is important and widely used. The latest version of HTML is HTML5. HTML is supported by all browsers and all platforms.

Click here to read about the importance of HTML in the web development.

What is Javascript?

JavaScript is a versatile and widely used programming language that adds interactivity to websites. It runs in web browsers, making web pages dynamic by allowing them to respond to user actions like clicking buttons or filling out forms. With JavaScript, you can create things like interactive games, form validation, and real-time updates without needing to reload the entire webpage. It's a crucial component of modern web development, often working alongside HTML and CSS. JavaScript is known for its user-friendly syntax, making it accessible to both beginners and experienced developers, and it plays a key role in enhancing the functionality and user experience of the internet.

JavaScript, created by Brendan Eich in just 10 days in 1995, initially aimed to make web pages more interactive. It gained prominence when it was adopted by Netscape Navigator, one of the earliest web browsers. In 1997, it was standardized as ECMAScript, paving the way for its wider use. JavaScript evolved significantly over the years, with major updates like ES6 in 2015 introducing modern features and syntax. It has become an integral part of web development, enabling dynamic content, interactive web applications, and even server-side scripting through technologies like Node.js. JavaScript's continuous growth and community support have solidified its place as a fundamental web technology.

How to create a basic HTML page using JavaScript?

Before we start, make sure you have a text editor like Visual Studio Code or you can use any online code editor. We have created an HTML file named "index.html" in which we will be writing our code.

Step 1. Create a basic HTML structure

We create a basic HTML structure for our webpage in the index.html file. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Attractive Dynamically Generated Webpage</title>   
</head>
<body>
    <div id="main-page"></div>
</body>
</html>

In this above HTML template, we have.

Step 2. Add CSS

We will add some CSS to the initially created HTML page structure.

<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f2f2f2;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        }
</style>

In the above code, within the <style> block, we define CSS rules to style the webpage. We set the background color, used the Arial font, and centered the content both horizontally and vertically.

Step 3. Add Javascript

Now, let's dive into the JavaScript code responsible for dynamically generating content. We'll break down the code into components.

// Get the main-page div
var mainPage = document.getElementById("main-page");

// Create the main div with styling
var mainDiv = document.createElement("div");
mainDiv.id = "main-div";
mainDiv.style.backgroundColor = "#fff";
mainDiv.style.borderRadius = "10px";
mainDiv.style.boxShadow = "0 0 10px rgba(0, 0, 0, 0.2)";
mainDiv.style.width = "400px";
mainDiv.style.height = "400px";
mainDiv.style.display = "flex";
mainDiv.style.flexDirection = "column";
mainDiv.style.justifyContent = "center";
mainDiv.style.alignItems = "center";

In the above part of the code.

Now, let's proceed with creating and customizing the content within the main div.

// Create the top div with text
var topDiv = document.createElement("div");
topDiv.id = "top-div";
topDiv.style.textAlign = "center";

// Create the heading
var heading = document.createElement("h1");
heading.textContent = "Dynamic Webpage Example";
heading.style.color = "#333";

// Create the paragraph
var paragraph = document.createElement("p");
paragraph.textContent = "Welcome to my dynamically generated webpage!";
paragraph.style.color = "#666";

// Append heading and paragraph to the top div
topDiv.appendChild(heading);
topDiv.appendChild(paragraph);

In this section, we create the following components.

Let's proceed to create the bottom div, which contains a button.

// Create the bottom div for the button
var bottomDiv = document.createElement("div");
bottomDiv.id = "bottom-div";
bottomDiv.style.textAlign = "center";

// Create the button
var button = document.createElement("button");
button.textContent = "Click Me";
button.className = "button button-primary";
button.style.backgroundColor = "#019644";
button.style.color = "#fff";
button.style.border = "none";
button.style.padding = "10px 20px";
button.style.cursor = "pointer";
button.style.borderRadius = "5px";

// Add a click event listener to the button
button.addEventListener("click", () => {
    alert("Button Clicked!");
});

// Append the button to the bottom div
bottomDiv.appendChild(button);

Here, we create the following components.

Now, we will structure the page. With the components created, we can now structure the page by appending the top and bottom divs to the main div.

// Append top and bottom divs to the main div
mainDiv.appendChild(topDiv);
mainDiv.appendChild(bottomDiv);

This step ensures that both the content at the top (heading and paragraph) and the content at the bottom (button) are added to the mainDiv.

To complete the dynamic webpage, we need to insert the `mainDiv` into the main `div` with the ID "main-page" that we initially selected:

// Append the main div to the main-page div
mainPage.appendChild(mainDiv);

The above line makes the dynamically generated content visible on the webpage within the `main-page` div.

Styling is an essential part of creating an attractive webpage. In the provided code, we've already applied CSS styles using JavaScript. However, you can further enhance the page's visual appeal by modifying the styles to match your design preferences. You can modify these styles or add more CSS rules to achieve the desired look for your webpage. You can also consider creating an external CSS file and linking it to your HTML for better organization.

How to create html page using javascript

Conclusion

Creating an attractive, dynamically generated webpage with JavaScript opens up a world of possibilities for building interactive and visually appealing web applications. In this guide, we covered the entire process, from setting up your project to adding dynamic content, styling elements, and incorporating interactivity.

By following these steps and experimenting with JavaScript, you can create web pages that cater to your specific needs and requirements, whether you're building a simple webpage or a complex web application. JavaScript is a powerful tool for bringing your web content to life, making your web applications more engaging and responsive.