数据结构
网络
关系数据库管理系统
操作系统
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+ 次浏览
广告