How to add an element horizontally in Html page using JavaScript?

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Code explanation-
We have created a



html

filter_none

edit
close

play_arrow

link
brightness_4
code

“<div>”

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

“<div>”

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

“<table>”.

chevron_right


So, the idea is that in a table we can create one table row i.e. 

html

filter_none

edit
close

play_arrow

link
brightness_4
code

” <tr>”

chevron_right


and for adding each node we wiil create table data i.e.

html

filter_none

edit
close

play_arrow

link
brightness_4
code

”<td>”

chevron_right


. So, there will be one “tr” and every node will be treated as 

html



filter_none

edit
close

play_arrow

link
brightness_4
code

“<td>”

chevron_right


. 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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output
 

After inserting many nodes
 

 

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : yagyeshbagaya