In this article you'll learn how to create and add new HTML element (like div, p, span, button, img, a, etc..) in document using JavaScript.
To create HTML elements, we going to use JavaScript appendChild() method. Its use to add HTML element in document or in any other element using JavaScript.
Let's understand with example:
I have created two file with name index.html and index.css. Then link the css file to .html file. And created the basic structure in html. Now let's start writing code.
So below I've added one div with class value container in body tag.
Now we going to create span tag using JavaScript and append it inside the container class.
HTML
<div class="container">
</div>
CSS
*{
padding: 0;
margin: 0;
}
.container{
width: 100%;
height: 100vh;
background-color: #000;
}
Output :
As you can see black color in image above, its a full width div with container class with black color.
Now we going to add span tag inside this container class using JavaScript.
Create and add HTML element using JavaScript.
So first of all we'll define the variable for element, in which we want to add new element.
Here we going to add new element (span tag) inside container class.
JavaScript
let container = document.querySelector('.container');
Creating new element using JavaScript.
Let's create new element (span tag) and store it inside variable named newelement.
JavaScript
let newelement = document.createElement('span');
Now element is created (span tag). Now let's style it.
Define styles to newly created element.
we'll add styles through creating new class in CSS file and add that newly created class in span tag (which we created above using JavaScript) using javascript classList method. You can also add CSS directly in javascript.
We'll create new class in css file with name .new_element_class and add in span tag using JavaScript.
CSS
new_element_class{
width: 100px;
height: 100px;
background-color: #fff;
border-radius: 200px;
}
Now new class is created with stylings.
Now let's add this class to newly created element.
Apply styles to newly created element.
Let's add class (new_element_class) in span tag (which we created.) using JavaScript classList() method.
JavaScript
newelement.classList.add('new_element_class');
Now after adding classlist. Let's add this newly created element span tag(variable newelement) in container class.
Show newly created element using JavaScript.
We'll do it by using JavaScript appendChild method.
JavaScript
container.appendChild(newelement);Output :
As you can see in image above. Their is an white circle that's a span tag.
So that's how you can add HTML element using JavaScript.
Here below is another way you can add CSS directly in JavaScript without creating new class in css file.
JavaScript
let container = document.querySelector('.container');
let newelement = document.createElement('span');
newelement.classList.add('paragraph');
newelement.style.width = '100px';
newelement.style.height = '100px';
newelement.style.backgroundColor = '#fff';
newelement.style.borderRadius = '200px';
container.appendChild(newelement);So that's how you can apply styles directly with JavaScript.
Below is the final code.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
</div>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
}
.container{
width: 100%;
height: 100vh;
background-color: #000;
}
.new_element_class{
width: 100px;
height: 100px;
background-color: #fff;
border-radius: 200px;
}
JavaScript
<script>
let container = document.querySelector('.container');
let newelement = document.createElement('span');
newelement.classList.add('new_element_class');
container.appendChild(newelement);
</script>
So that's how you can create and show new HTML element using JavaScript. If you have any question or suggestion, feel free to write them in the comment section.
Share your thoughts.