Teach with us

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.

Updated on 06-Feb-2023 11:51:23

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements