How to add an element horizontally in Html page using JavaScript?
Last Updated :
26 Oct, 2021
There can be some cases where we have the requirement to add elements in a horizontal manner. Like, if your elements are linked list nodes and you want to add them horizontally.
Now the question arises how we can do this in better way.
One approach can be to use “display” property with the value “inline grid” as shown in the following program:
When the user clicks the button to add the node. The node starts to prepend in the linked list sequentially. To achieve this we have created the “div” with the “display” property whose value we have given as “inline-grid”.
Example-1
javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<center>
<h1 style="color:green">
Inserting node horizontally
</h1>
</center>
<br><br>
<h1>click to insert</h1>
<div>
<input type = 'button'
onclick = 'javascript: insert()' value = 'insert'>
<br>
</div>
<br><br><br><br>
<div id = 'division'
style = 'min-width: 300px; min-height: 80px;'>
</div>
</div>
<style>
@keyframes addnode {
from
{
transform: translateX(-100px);
}
to {
transform: translateX(200px);
}
}
</style>
<script>
var array = [];
var number =1 ;
function insert()
{
var div = document.createElement('div');
div.innerHTML = number;
document.getElementById('division').prepend(div);
div.style = 'min-width: 80px; height: 80px;
border: 4px solid green; display: inline-grid;
text-align: center;background:
green;border-radius: 50%;animation-name: addnode;
animation-duration: 2s;animation-direction: all;
transition-property: transform;
transform: translateX(200px);';
array.push(number);
number++;
div.addEventListener('animationend', function() {
});
}
</script>
</body>
</html>
Output:
Code explanation-
We have created a
html
element with id as “division” which will be our main division in which we add different “div” as node. In the “insert()” function we have created the.
html
which will be the element of our linked list we have added a “number” which will start from 1 and will increment as we add more elements in the list. For the node to be prepended horizontally we have used the display property with value ” inline-grid”.
But, there is a problem here in this solution, as we keep on adding elements in the list after a certain node the elements start to jump to the line which is not desired. This is what demonstrated in the output below.
What if we want to add every node on the single line?
Another approach:
In this approach, to achieve the same thing we have used
html
So, the idea is that in a table we can create one table row i.e.
html
and for adding each node we will create table data i.e.
html
. So, there will be one “tr” and every node will be treated as
html
. So, in this way an infinite number of nodes can be added by using a table.
We can see its implementation through program.
Example- 2:
javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</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 = 'javascript: 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>
<style>
@keyframes addnode {
from {
transform: translateX(-100px);
}
to {
transform: translateX(200px);
}
}
</style>
<script>
var array = [];
var number = 1 ;
function insert()
{
var td = document.createElement('td');
td.innerHTML = number;
document.getElementById('tablerow').prepend(td);
td.style = 'min-width: 80px; height: 80px;
border: 4px solid green;
text-align: center;background: green;
border-radius: 50%;animation-name: addnode;
animation-duration: 2s;
animation-direction: all;
transition-property: transform;
transform: translateX(200px);';
array.push(number);
number++;
td.addEventListener('animationend', function() {
});
}
</script>
</body>
</html>
Output
After inserting many nodes
Similar Reads
How to get the javascript function parameter names/values dynamically ? In this article, we are given any arbitrary JavaScript function and the task is to return the parameter names of the function. Approach: JavaScript contains a method called toString() which is used to represent a function code in its string representation. This method is used to get the parameter na
2 min read
How To Include a JavaScript File in Another JavaScript File? The import and export syntax available in ES6 (ECMAScript 2015) module is used to include a JavaScript file in another JavaScript file. This approach is the most modern and recommended way to share code between JavaScript files.It allows you to break your code into smaller modules and then import th
4 min read
How to override a JavaScript function ? In this article, we are given an HTML document and the task is to override the function, either a predefined function or a user-defined function using JavaScript. Approach: When we run the script then Fun() function is called. After clicking the button the GFG_Fun() function is called and this funct
2 min read
Using the function* Declaration in JavaScript The function* declaration is used to define a generator that returns a Generator object. Generators are very powerful for asynchronous programming as they aim to resolve callback problems. In a generator, the yield keyword is used instead of return. The yield statement suspends the functionâs execut
2 min read
What is the difference between call and apply in JavaScript ? JavaScript call() Method: It calls the method, taking the owner object as an argument. The keyword this refers to the 'owner' of the function or the object it belongs to. We can call a method that can be used on different objects. Syntax: object.objectMethod.call( objectInstance, arguments ) JavaScr
2 min read
How to find out the caller function in JavaScript? In this article, we see the methods to find out the caller function in Javascript. Sometimes, the developer may want to modify how a function works on the basis of its caller function. To find out the caller function name, we will use the Function object's caller property. Property: Function.caller
1 min read
How to negate a predicate function in JavaScript ? In this article, we will see how to negate a predicate function in JavaScript. Predicate functions are the ones that check the condition and return true and false based on the argument. Our task is to get the opposite of the predicate function. We follow the following method to get the desired resul
3 min read
How to iterate over a callback n times in JavaScript? Given a callback function, we have to iterate over a callback n times. The callback is a function that is passed as an argument. To iterate over the callback function, we have to run the callback function n time.Here we have some common approaches:Table of ContentUsing recursion to iterate the n tim
4 min read
How to call function from it name stored in a string using JavaScript ? In this article, we will call a function from the string stored in a variable. There are two methods to call a function from a string stored in a variable. Using window object methodUsing eval() method Note: The eval() method is older and is deprecated. Method 1: Using the window object. The window
2 min read
How to measure time taken by a function to execute using JavaScript ? This article will show how to measure the time taken by a function to execute using Javascript. To measure the time taken by a function to execute we have three methods: Table of Content Using the Using Date ObjectUsing the performance.now() methodUsing the console.time() methodMethod 1: Using the U
3 min read