Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to add an element horizontally in HTML page using JavaScript?
We can use the JavaScript method "createElement" to create a new element. Then, we can use the method "appendChild" to add the element to a parent element on the HTML page. To position the element horizontally, we can use CSS styles such as "display:inline-block" or "float:left/right" on the newly created element.
Suppose a situation where we want to depict a graphical representation of a Linked List data structure. Every time the user clicks on a button, a new node, represented by a green circle in our case, should get prepended to the list of nodes horizontally.
And the text inside that green circle should be the index of that particular node.
Approach
The approach here is quite simple and straightforward ?
We will create a button that will be responsible for inserting a new node.
Each time the button gets clicked, the count of nodes increases by 1.
Then a separate function responsible for rendering the nodes will take in that count and render the nodes.
In order to render the nodes in reverse order, we will give our container div a flex-direction of row-reverse.
Example
Here is the complete working example for this approach ?
<!DOCTYPE html>
<html>
<head>
<title>Linked List Graphic Representation</title>
<style>
#holder {
display: flex;
flex-direction: row-reverse;
align-items: center;
margin-top: 10px;
justify-content: flex-end;
overflow-x: scroll;
}
.element{
border-radius: 50%;
background: green;
color: white;
height: 25px;
width: 25px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<button onclick="handleInsert()">Insert Node</button>
<div id="holder"></div>
<script>
let currentElements = 0;
const handleRender = () => {
const holder = document.getElementById('holder');
holder.innerHTML = '';
for (const index in Array(currentElements).fill(null)) {
const element = document.createElement('div');
element.innerText = index;
element.classList.add('element');
holder.appendChild(element)
}
};
const handleInsert = () => {
currentElements++;
handleRender();
};
handleRender();
</script>
</body>
</html>
Key Methods Used
createElement(): Creates a new HTML element of specified type
appendChild(): Adds a child element to a parent element
getElementById(): Selects an element by its ID attribute
classList.add(): Adds a CSS class to an element
CSS Flexbox for Horizontal Layout
The horizontal positioning is achieved using CSS Flexbox properties:
display: flex: Makes the container a flex container
flex-direction: row-reverse: Arranges items horizontally in reverse order
justify-content: flex-end: Aligns items to the end of the container
How It Works
The example demonstrates a linked list visualization where:
Each click on "Insert Node" increments the
currentElementscounterThe
handleRender()function recreates all nodes from scratchNew nodes appear at the left due to
flex-direction: row-reverseEach node displays its index number inside a green circle
Alternative Approaches
For simpler horizontal element addition without the reverse order:
<!DOCTYPE html>
<html>
<body>
<button onclick="addElement()">Add Element</button>
<div id="container" style="display: flex; gap: 10px;"></div>
<script>
let counter = 0;
function addElement() {
const container = document.getElementById('container');
const newElement = document.createElement('div');
newElement.textContent = 'Item ' + (++counter);
newElement.style.cssText = 'padding: 10px; background: blue; color: white; border-radius: 5px;';
container.appendChild(newElement);
}
</script>
</body>
</html>
Explanation
We created a basic HTML file that creates a simple linked list graphic representation using JavaScript. It has a button that, when clicked, calls a function to insert a new node (element) into the linked list and updates the graphic representation.
The graphic representation is created using a div element with a class of "element" and is styled to look like a circle. The elements are displayed in a flex container with the "holder" id, and the container is set to overflow-x: scroll to allow for scrolling when there are too many elements to fit in the viewport.
Conclusion
Adding elements horizontally in JavaScript involves using createElement() and appendChild() combined with CSS Flexbox. This approach provides flexible control over element positioning and layout direction.
2K+ Views
