如何实现点击单个Box生成多个Box的HTML交互功能

先给你一套可直接运行的完整代码，再拆解关键逻辑：

完整代码 #

HTML #

<div class="box"></div>

CSS #

.box { 
  width: 100px; 
  height: 100px; 
  border: 1px solid green; 
  background: steelblue; 
  margin: 10px; /* 加外边距避免盒子重叠 */
  display: inline-block; /* 让盒子横向排列，视觉更清晰 */
}

JavaScript #

// 标记是否为第一次点击初始Box
let isFirstClick = true;

// 给所有Box绑定点击事件的统一函数
function bindBoxEvents() {
  // 把动态集合转为数组，避免循环时出现索引异常
  const boxes = Array.from(document.getElementsByClassName('box'));
  
  boxes.forEach(box => {
    // 先移除旧事件，防止重复绑定导致一次点击触发多次生成
    box.removeEventListener('click', handleBoxClick);
    box.addEventListener('click', handleBoxClick);
  });
}

// 点击Box的核心处理逻辑
function handleBoxClick() {
  // 第一次点击生成2个，之后每次生成4个
  const createCount = isFirstClick ? 2 : 4;
  const container = document.body;

  // 循环创建新Box元素并添加到页面
  for (let i = 0; i < createCount; i++) {
    const newBox = document.createElement('div');
    newBox.classList.add('box');
    container.appendChild(newBox);
  }

  // 第一次点击后，后续点击都生成4个
  isFirstClick = false;
  // 给新生成的Box也绑定点击事件
  bindBoxEvents();
}

// 页面加载完成后，给初始Box绑定事件
document.addEventListener('DOMContentLoaded', bindBoxEvents);

关键逻辑说明 #

1. 样式优化：在原有CSS基础上添加margin和display: inline-block，解决盒子重叠、排版混乱的问题，新生成的Box会横向有序排列。
2. 事件绑定：用bindBoxEvents统一管理所有Box的点击事件，每次生成新Box后重新绑定，确保新盒子也能触发生成操作；同时先移除旧事件，避免重复绑定导致一次点击生成多倍盒子。
3. 生成数量控制：通过isFirstClick变量判断点击阶段，第一次点击初始Box时生成2个，之后无论点击哪个Box，每次都生成4个。

内容的提问来源于stack exchange，提问作者Muhammad Waqas