实现点击按钮生成带序号的box类div元素的技术需求问询

直接上完整实现代码，包含HTML、CSS和JavaScript部分：

HTML 结构 #

<button id="addBoxBtn">新增Box</button>
<div id="boxContainer"></div>

CSS 样式（匹配参考图的Box视觉效果） #

.box {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 8px 0;
  width: 200px;
  background-color: #f5f5f5;
}

JavaScript 逻辑 #

// 初始化计数器，从1开始记录下一个编号
let counter = 1;
// 获取按钮和存放Box的容器
const addBtn = document.getElementById('addBoxBtn');
const container = document.getElementById('boxContainer');

addBtn.addEventListener('click', () => {
  // 创建新div元素
  const newBox = document.createElement('div');
  // 给新div添加box类
  newBox.classList.add('box');
  // 设置编号文本
  newBox.textContent = counter;
  // 将新Box插入到容器中
  container.appendChild(newBox);
  // 计数器自增，准备下一次的编号
  counter++;
});

核心逻辑说明 #

• 用counter变量持续追踪下一个要使用的编号，每次点击按钮后自增，保证编号连续不重复
• 通过原生DOM方法完成元素创建、类名添加和页面插入，逻辑简洁高效

内容的提问来源于stack exchange，提问作者Shayan Affandi