Javascript 如何使列表中的第一项为第二项留出空间，依此类推

发布于06月18日

我创建了一个按钮，单击该按钮可在列表div上创建一个项目.在列表div中，"Total:"是硬编码的.我希望无论何时创建项目，总金额都会下降，这样项目就可以取而代之，并且总金额可以显示在底部.但问题总数将保留在原来的位置，项目将在其下方创建.我如何才能改变这种情况？

以下是代码(试用版):

const btn = document.querySelector(".btn");
const itemList = document.querySelector(".item-list");

btn.addEventListener('click', function(e) {
  const para = document.createElement('div');
  para.classList.add('item-list');
  para.innerHTML = `<p class="item">Potato Chips</p>`
  itemList.appendChild(para);
})

.list-container {
  height: 500px;
  width: 300px;
  background-color: cadetblue;
}

header {
  background-color: burlywood;
  border-style: groove;
}

.btn {
  margin-bottom: 20px;
}

<div class="list-container">
  <header>
    <h4>List Time</h4>
    <button class="btn">click</button>
  </header>
  <div class="item-list">
    <div>
      <p>Total: </p>
    </div>
  </div>
</div>

const btn = document.querySelector(".btn"); const itemList = document.querySelector(".item-list"); const totalEl = document.getElementById('total'); // added id on the element I want to insert items before btn.addEventListener('click', function(e) { const para = document.createElement('div'); para.classList.add('item-list'); para.innerHTML = `<p class="item">Potato Chips</p>` itemList.insertBefore(para, totalEl); })

<div class="list-container"> <header> <h4>List Time</h4> <button class="btn">click</button> </header> <div class="item-list"> <div id="total"> <p>Total: </p> </div> </div> </div>

Javascript 如何使列表中的第一项为第二项留出空间，依此类推

推荐答案

Javascript相关问答推荐

确定MutationRecord中removedNodes的索引

如何解决CORS政策的问题

在vercel throws上部署带有gunjs的sveltekit应用无法找到模块./' lib/文本编码'

如何在JavaScript文件中使用Json文件

Angular 中的类型错误上不存在获取属性

我可以使用使用node.js创建的本地主机来存储我网站上提交的所有数据吗？没有SQL或任何数据库.只有HTML语言

当id匹配时对属性值求和并使用JavaScript返回结果

映射类型定义，其中值对应于键

覆盖加载器页面避免对页面上的元素进行操作

创建以键值对为有效负载的Redux Reducer时，基于键的类型检测

为什么云存储中的文件不能公开使用？

将嵌套数组的元素乘以其深度，输出一个和

FileReader()不能处理Firefox和GiB文件

我们是否可以在reactjs中创建多个同名的路由

Plotly.js栏为x轴栏添加辅助文本

JavaScript -如何跳过某个字符(S)来打乱字符串中的字符

Html/JS：如何在脚本执行前阻止呈现？

如何将PNG图像放在wix站点的Open Streemap map 上，使PNG图像成为 map 不可分割的一部分？

This.forceUPDATE并通过Reaction-Router-DOM链接组件传递状态

在两个数组范围中输入日期范围