How to Add Element Before Another Element Using JavaScript.
HTML
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
CSS
*{
padding: 0;
margin: 0;
}
body{
width: 100%;
height: 100vh;
background-color: #fff;
position: relative;
}
.container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
}
.box1, .box2, .box3{
width: 100px;
height: 100px;
background-color: #000;
margin: 10px;
}
Output :
So as you can see in image above. Three boxes created. Now we'll create new element and add before one of this boxes using JavaScript.
Now let's add JavaScript to Create New Element.
So first of all, we'll define the variables for container and boxes.
JavaScript
let container = document.querySelector('.container');
let box1 = document.querySelector('.box1');
let box2 = document.querySelector('.box2');
let box3 = document.querySelector('.box3');
Now let's create new element to insert before first box (class="box1"). We going to create p tag (paragraph).
We'll create new element (p tag) and store it inside paragraph variable.
JavaScript
let paragraph = document.createElement('p');
Paragraph is created, now for styline we'll declare CSS directly in JavaScript, you can also create new class in css file and add that class in newly created p tag using JavaScript classList() method. (paragraph.classList.add('newly-created-class-in-css')).
JavaScript
paragraph.style.width = '100px';
paragraph.style.height = '50px';
paragraph.style.margin = '10px';
paragraph.style.color = '#fff';
paragraph.style.backgroundColor = 'blue';
paragraph.textContent = 'paragraph';
Now styling is done let's insert this paragraph before first box (class="box1"). We'll do it by JavaScript insertBefore() method.
JavaScript
container.insertBefore(paragraph, box1);
Output :
As you can see paragraph is created and inserted successfully before first box.
Now let's add that paragraph before third box (class="box3").
JavaScrpt
container.insertBefore(paragraph, box2);
Output :
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 copy.css">
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
}
body{
width: 100%;
height: 100vh;
background-color: #fff;
position: relative;
}
.container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
}
.box1, .box2, .box3{
width: 100px;
height: 100px;
background-color: #000;
margin: 10px;
}
JavaScript
<script>
let box = document.querySelector('.box');
let container1 = document.querySelector('.container1');
let container2 = document.querySelector('.container2');
let container3 = document.querySelector('.container3');
let paragraph = document.createElement('p');
paragraph.style.width = '100px';
paragraph.style.height = '50px';
paragraph.style.margin = '10px';
paragraph.style.color = '#fff';
paragraph.style.backgroundColor = 'blue';
paragraph.textContent = 'paragraph';
box.insertBefore(paragraph, container3);
</script>
That's how you can create and insert new element before another pre existing HTML element using JavaScript insertBefore() method. If you have any question or suggestion you can write it in the comment section.
Share your thoughts.