如何使用JavaScript在HTML頁面中水平新增元素？
- WBOY轉載
- 2023-08-25 10:01:17867瀏覽
我們可以使用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>
Explanation
的中文翻譯為：解釋
我們建立了一個基本的HTML文件，使用JavaScript建立了一個簡單的鍊錶圖形表示。它有一個按鈕，當點擊時，呼叫一個函數將一個新的節點（元素）插入到鍊錶中，並更新圖形表示。
圖形表示使用具有類別名為"element"的div元素創建，並被樣式化成圓形。這些元素被顯示在具有"id"為"holder"的flex容器中，容器被設定為overflow-x: scroll以便在視窗中有太多元素時可以滾動。
以上是如何使用JavaScript在HTML頁面中水平新增元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除