如何用JavaScript在HTML页面中水平添加一个元素

我们可以使用JavaScript方法 “createElement “来创建一个新元素。然后，我们可以使用 “appendChild “方法将该元素添加到HTML页面的父元素中。为了水平定位该元素，我们可以在新创建的元素上使用CSS样式，如 “display:inline-block “或 “float:left/right”。

假设有这样一种情况，我们想要描绘一个关联列表数据结构的图形化表示。每当用户点击一个按钮，一个新的节点，在我们的例子中用一个绿色的圆圈表示，应该被水平地预置到节点列表中。

绿色圆圈内的文字应该是该特定节点的索引。

方法

这里的方法非常简单明了：

我们将创建一个按钮，负责插入一个新节点。
每当按钮被点击，节点的数量就会增加1。
然后，一个负责渲染节点的单独的函数将接收该计数并渲染节点。
为了以相反的顺序渲染节点，我们将给我们的容器div一个行逆向的flex-direction。

例子

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>