Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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>
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.
2K+ Views
