如何使用 JavaScript 在 HTML 页面中水平添加元素？

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

假设一种情况，我们想要描绘一个链接列表数据结构的图形表示。每次用户点击按钮时，一个新的节点（在本例中由绿色圆圈表示）都应该水平地添加到节点列表的开头。

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

方法

这里的方法非常简单直接：

  • 我们将创建一个按钮，它负责插入一个新节点。

  • 每次按钮被点击时，节点数量就会增加 1。

  • 然后，一个负责渲染节点的单独函数将接收该数量并渲染节点。

  • 为了以相反的顺序渲染节点，我们将容器 div 的 flex-direction 设置为 row-reverse。

示例

以下是此方法的完整工作示例：

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

说明

我们创建了一个基本的 HTML 文件，使用 JavaScript 创建了一个简单的链接列表图形表示。它有一个按钮，当点击时，会调用一个函数将一个新节点（元素）插入到链接列表中并更新图形表示。

图形表示是使用一个类名为“element”的 div 元素创建的，并进行了样式设置使其看起来像一个圆圈。这些元素在一个带有“holder”id 的 flex 容器中显示，并且容器被设置为 overflow-x: scroll 以允许在元素过多无法容纳在视口中时进行滚动。

更新于：2023年2月6日

2K+ 次浏览

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告