JavaScript Create Element With Class
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Anjali
In this tutorial we will show you the solution of JavaScript create element with class, in our last tutorial we understand that how to change background color of a div, we hope that you understand that article properly.
Now, in this article let us understand how to create element with class in JavaScript.
Step By Step Guide On JavaScript Create Element With Class :-
As, there are many ways with the help of which we are able to create an element with class in JavaScript.
But in this article, we understand this with the help of createElement() method. Now, let us understand this method with help of codes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>home page</title>
</head>
<body>
<div id="box"></div>
<script>
// Creation of element
const element = document.createElement('div');
// Adding classes to element
element.classList.add('bg-red', 'text-lg');
// Add text content to element
element.textContent = 'Hello to Talkers Code';
</script>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Here, then we create a body tag. All the content which we want to show on browser’s screen or display is always written inside this codes.
- Here, inside body we create an empty div means without any content with id name box. You can create any element with any id or class inside example.
- Now, after this we use JavaScript, which is always inside script tag. We also know that script tag is paired tag, that’s it must have a closing tag.
- Inside script, first we create a constant with name element of div that we create in body of html page. After that we add some classes to this with help of class list add.
- And at last we add some content inside div with help of div by using text content. And the value given to this is text that we want to store, whereas the background color given is red and font size large, this all we done with the help of JavaScript.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
At last in conclusion, here we can say that with the help of this article we are able to create an element with class using JavaScript.
I hope this tutorial on JavaScript create element with class helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
