如何使用JavaScript在HTML頁面中水平新增元素？-js教程-PHP中文網

方法

範例

Explanation

解釋

首頁

web前端

js教程

如何使用JavaScript在HTML頁面中水平新增元素？

Aug 25, 2023 am 10:01 AM

如何使用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>

登入後複製