我们可以使用JavaScript的"createElement"方法来创建一个新元素。然后，我们可以使用"appendChild"方法将该元素添加到HTML页面上的父元素中。为了水平定位元素，我们可以在新创建的元素上使用CSS样式，比如"display:inline-block"或"float:left/right"。
假设我们想要描述一个链表数据结构的图形表示的情况。每当用户点击按钮时，一个新的节点（在我们的例子中用绿色圆圈表示）应该水平地被添加到节点列表的前面。
而那个绿色圆圈内的文本应该是该特定节点的索引。
方法
这里的方法非常简单和直接−
立即学习“Java免费学习笔记（深入）”；
我们将创建一个按钮，该按钮将负责插入一个新节点。
每次点击按钮时，节点的计数增加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以便在视口中有太多元素时可以滚动。
