資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 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+ 次瀏覽
廣告