Creating a New Element in DOM

In this blog post, we'll dive into creating and manipulating DOM elements using JavaScript. We'll walk through an example where we dynamically create a <div> element, set its attributes, style it, and append it to the body of our HTML document.

HTML Structure

First, let's start with the basic HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chai aur code</title>
</head>
<body style="background-color: #212121; color: #fff;">

</body>
</html>

JavaScript Code

Next, we add our JavaScript code to create and manipulate a <div> element:

<script>
    const div = document.createElement("div");
    console.log(div);

    div.className = "main";
    // div.id = "myId";
    div.id = Math.round(Math.random() * 10 + 1);

    div.setAttribute("title", "generate title");

    div.style.backgroundColor = "green";
    div.style.padding = "15px";

    // div.innerText = "chai aur code"; //better way of writing this
    const addText = document.createTextNode("chai aur code");
    div.appendChild(addText);

    document.body.appendChild(div);
</script>

Step-by-Step Explanation

Creating a <div> Element:

const div = document.createElement("div");
console.log(div);

Here, we use document.createElement to create a new <div> element and log it to the console to verify its creation.

Setting Class and ID:

div.className = "main";
// div.id = "myId";

//if we want to set id between 1 to 10
div.id = Math.round(Math.random() * 10 + 1);

We set the class of the <div> to "main" and assign it a random ID between 1 and 10.

Setting Attributes:

div.setAttribute("title", "generate title");

Using setAttribute, we add a title attribute with the value "generate title" .

Styling the <div>:

div.style.backgroundColor = "green";
div.style.padding = "15px";

We apply some inline styles to the <div>, setting the background color to green and adding padding.

Adding text content to <div>:

 // div.innerText = "chai aur code"; 

 //better way of writing this
 const addText = document.createTextNode("chai aur code");
 div.appendChild(addText);

Instead of using innerText, we create a text node with document.createTextNode and append it to the <div> using appendChild.

Appending the <div> to the Body:
```
 document.body.appendChild(div);
```
Finally, we append the <div> to the <body> of the document.

Conclusion

By following these steps, we dynamically create and manipulate a <div> element using JavaScript. This approach provides a robust way to interact with the DOM and add content dynamically to your web pages.

I hope you found this tutorial helpful. Happy coding with Js with harsh.

How to create a new element in DOM (Part 2)

Table of contents

HTML Structure

JavaScript Code

Step-by-Step Explanation

Conclusion