Add element horizontally in Html page using JavaScript
Last Updated :
31 Oct, 2025
Improve
Adding elements horizontally in an HTML page using JavaScript allows you to display items side by side dynamically. This is useful for layouts like image galleries, linked lists, or step indicators.
You can achieve this using CSS properties such as display: inline-grid or HTML structures like <table>.
[Approach-1]: Using the display: inline-grid Property
In this method, each new element is added side by side (horizontally) by setting its display style to inline-grid.
- Elements appear side by side.
- Animation adds smooth entry.
- Simple and flexible layout.
- May wrap to next line if space is less.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inserting Node Horizontally</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<center>
<h1 style="color:green">Inserting Node Horizontally</h1>
</center>
<br><br>
<h1>Click to Insert</h1>
<div>
<input type="button" onclick="insert()" value="Insert">
</div>
<br><br><br><br>
<div id="division" style="min-width: 300px; min-height: 80px;"></div>
<script src="script.js"></script>
</body>
</html>
@keyframes addnode {
from {
transform: translateX(-100px);
}
to {
transform: translateX(200px);
}
}
#division div {
min-width: 80px;
height: 80px;
border: 4px solid green;
display: inline-grid;
text-align: center;
background: green;
color: white;
border-radius: 50%;
animation-name: addnode;
animation-duration: 2s;
transition-property: transform;
transform: translateX(200px);
margin-right: 5px;
}
let array = [];
let number = 1;
function insert() {
const div = document.createElement('div');
div.innerHTML = number;
document.getElementById('division').prepend(div);
array.push(number);
number++;
div.addEventListener('animationend', function() {
// Animation completed
});
}
- A
divwithdisplay: inline-gridmakes each new element appear next to the previous one. - The
insert()function creates a new node and adds it to the container. - The animation gives a smooth appearance effect.
[Approach 2]: Using a <table> for Infinite Horizontal Nodes
To keep all nodes in a single line, we can use a table row (<tr>) - each element will be a table cell (<td>).
- Elements stay on one line.
- Perfect for linked list visuals.
- Dynamically adds nodes using JS.
- More structured than inline-grid.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inserting Node Horizontally</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<center>
<h1 style="color:green">Inserting Node Horizontally</h1>
</center>
<br><br>
<h1>Click to Insert</h1>
<div id="division" style="visibility: visible; position: absolute; margin-top: 0px;">
<div>
<input type="button" onclick="insert()" value="Insert">
<br>
</div>
<br><br><br><br>
<table>
<tr id="tablerow">
<td id="tabledata" style="min-width: 300px; height: 58px;"></td>
</tr>
</table>
</div>
<script src="script.js"></script>
</body>
</html>
@keyframes addnode {
from {
transform: translateX(-100px);
}
to {
transform: translateX(200px);
}
}
#tablerow td {
min-width: 80px;
height: 80px;
border: 4px solid green;
text-align: center;
background: green;
color: white;
border-radius: 50%;
animation-name: addnode;
animation-duration: 2s;
transition-property: transform;
transform: translateX(200px);
margin-right: 5px;
}
let array = [];
let number = 1;
function insert() {
const td = document.createElement('td');
td.innerHTML = number;
document.getElementById('tablerow').prepend(td);
array.push(number);
number++;
td.addEventListener('animationend', function() {
// Animation completed
});
}
- A single table row (
<tr>) acts as the horizontal container. - Each node is added as a table cell (
<td>), ensuring all remain in one line. - This avoids the problem of elements wrapping to the next line.
Article Tags :
