JavaScript Create Element With Attributes
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Riya
In this tutorial we will show you the solution of JavaScript create element with attributes, here we defined onload event on body tag for load ‘fun()’ when user loads it will initialized then we created ‘div’ element with attribute class.
Also we can create any element we want with any attributes using javascript by ‘document.createElement(), setAttribute()’ methods. Here we styled that div element.
Step By Step Guide On JavaScript Create Element With Attributes :-
Here we defined onload event on body tag for begin fun() function when user loads this program.
Within function we created ‘div’ element and stored to variable ‘divEle’ then we sets attribute ‘class’ with value ‘dCls’ by setAttribute() method.
Using ‘divEle’ we added some style on that element those are ‘width set to ‘40%’, height set to ‘20rem’, background color sets to ‘yellow’ and added text ‘Hi John’’.
Finally we appended element div as child for body tag.
<!DOCTYPE html>
<html>
<head>
<title>Create Element</title>
</head>
<body onload="fun()">
<script>
function fun(){
const divEle=document.createElement('div');
divEle.setAttribute('class','dCls');
divEle.style.width='40%';
divEle.style.height='20rem';
divEle.style.backgroundColor='yellow';
divEle.textContent='Hi John';
document.body.appendChild(divEle);
}
</script>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contains information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here then we added onload event for load fun() method when loading this program on browser.
- In script tag we defined fun() function, here first we created element ‘div’ and stored to variable ‘divEle’ then we added class attribute value ‘dCls’ by setAttribute() method.
- We defined style for div tag, div width set to ‘40%’, height set to ‘20rem’ and background color set to ‘yellow’.
- For insert any text on element we need to use ‘textContent’ style property with any text here we given text is ‘Hi John’.
- We need to append this div element on webpage so we appended div element on body of html page.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to create element with attribute using javascript.
When we executes our program on browser we can see result of div element with yellow background, text ‘Hi John’.
We can also create any html elements using javascript with any attributes but never forget to append our created element on html tag because without appending we can’t see that element work on html webpage so we must append them on html tag.
I hope this tutorial on JavaScript create element with attributes helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
