JavaScript动态创建元素并转移旧元素ID的操控问题

你的核心问题是全局变量box没有更新指向新创建的盒子：

• 初始代码里box = document.getElementById('box')是对第一个盒子DOM元素的引用，哪怕你把旧盒子的ID清空、给新盒子设相同ID，box变量依然指向旧元素，所以键盘事件还是会操作旧盒子，新盒子自然无法被操控。
• 用计数器方案崩溃，大概率是因为你没有在创建新盒子后更新box变量，或者初始计数器与盒子ID不匹配，导致box一开始就是null，触发事件时操作空值引发报错。

方案1：直接更新box变量（推荐，逻辑简单） #

修改newBox函数，在创建新盒子后，把全局box变量重新指向新盒子，同时复制旧盒子的样式给新盒子，保证新盒子初始状态和旧盒子一致：

// 全局变量，初始指向第一个盒子
let box = document.getElementById('box');
const body = document.body;

function newBox(event) {
  // 旧盒子保留所有修改状态，仅移除边框和ID
  box.style.border = "none";
  box.id = "";

  // 创建新盒子
  let box2 = document.createElement("div");
  // 复制旧盒子的当前样式到新盒子（避免新盒子是空白样式）
  box2.style.width = box.style.width || "100px";
  box2.style.height = box.style.height || "100px";
  box2.style.position = "absolute";
  box2.style.left = box.style.left || "0";
  box2.style.top = box.style.top || "0";
  box2.style.backgroundColor = box.style.backgroundColor || "#ff0000";
  box2.style.borderRadius = box.style.borderRadius || "0";

  body.appendChild(box2);
  box2.id = "box";
  // 关键：更新全局box变量，指向新盒子
  box = box2;
}

方案2：用计数器管理盒子ID #

如果想用计数器方案，确保每次创建新盒子后更新box变量，同时初始计数器与盒子ID匹配：

// 全局计数器，初始值对应第一个盒子的ID（比如第一个盒子ID是box1）
let i = 1;
let box = document.getElementById(`box${i}`);
const body = document.body;

function newBox(event) {
  // 旧盒子保留状态，无需修改ID
  box.style.border = "none";
  
  // 计数器递增
  i++;
  // 创建新盒子
  let newBoxEl = document.createElement("div");
  // 复制旧盒子样式
  newBoxEl.style.width = box.style.width || "100px";
  newBoxEl.style.height = box.style.height || "100px";
  newBoxEl.style.position = "absolute";
  newBoxEl.style.left = box.style.left || "0";
  newBoxEl.style.top = box.style.top || "0";
  newBoxEl.style.backgroundColor = box.style.backgroundColor || "#ff0000";
  newBoxEl.style.borderRadius = box.style.borderRadius || "0";

  // 设置新ID
  newBoxEl.id = `box${i}`;
  body.appendChild(newBoxEl);
  // 更新box变量指向新盒子
  box = newBoxEl;
}

1. 样式继承：必须把旧盒子的当前样式复制给新盒子，否则新盒子会是浏览器默认的空白样式，看起来像旧盒子状态丢失。
2. 变量更新：全局box变量是键盘事件的操控对象，每次创建新盒子后必须更新它的指向，否则事件永远操作旧元素。

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