setInterval触发时重复追加div未替换旧元素，求助解决

问题核心 #

你的代码每次执行rows函数时，都会创建新的<td>元素并追加到Trow[b]中，再加上setInterval会周期性重复调用这个函数，自然会不断新增元素而非替换。另外代码里还有几个变量作用域的小问题，会导致潜在bug。

具体修复步骤 #

1. 清空目标容器再添加新内容
   在创建新元素之前，先把Trow[b]里的旧内容清空，这样新元素就会替换掉旧的。可以用两种方式：

   • 简单方式：Trow[b].innerHTML = ''
   • 更安全的DOM操作方式：

     while (Trow[b].firstChild) {
       Trow[b].removeChild(Trow[b].firstChild);
     }
     

2. 修复变量作用域问题

   • newDiv没有用let/const声明，会变成全局变量，改成const newDiv = document.createElement("div")
   • for (i of datas[n])里的i没声明，改成for (let i of datas[n])

3. 调整元素创建逻辑
   当前代码在charr.forEach里重复执行Trow[b].appendChild(td)，会导致逻辑冗余，应该把这行移出forEach，放到处理完charr之后。

修改后的完整代码 #

function rows(n, b) {
  // 先清空目标行的旧内容
  Trow[b].innerHTML = '';
  
  for (let i of datas[n]) {
    const td = document.createElement("td");
    const charr = i.split("");
    
    charr.forEach((e, idx) => {
      setTimeout(() => {
        const newDiv = document.createElement("div");
        newDiv.setAttribute("class", "newDiv");
        newDiv.innerHTML = e;
        td.appendChild(newDiv);
      }, 100 * idx);
    });
    
    // 处理完当前i的所有字符后，再把td添加到行里
    Trow[b].appendChild(td);
  }
}

// 调用示例（替换成你的实际调用逻辑）
setInterval(() => {
  // 这里传入你的n和b参数，比如每次调用可以切换n的值实现内容变化
  rows(/* 你的n值 */, /* 你的b值 */);
}, 2000);

额外说明 #

• 如果你的需求是替换每个<div>而不是整个行，可以给每个newDiv设置唯一标识（比如id），每次更新时先查找对应id的元素，存在就替换内容，不存在再创建。但从你的截图看，替换整行内容更符合需求。
• replaceChild没生效可能是因为你没找到正确的旧元素，或者调用时机不对（比如旧元素还没被创建出来就调用了），清空容器的方式更简单直接，适合新手。

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