JavaScript批量替换指定class的HTML元素仅最后一个生效问题

编写JavaScript模块替换所有带.item2类名的HTML元素时，仅最后一个匹配元素被成功替换，其余匹配元素被擦除：

• 替换前内容：

first one;first two;first three;
second one;second two;second three;
another one;another two;another three; 

• 预期替换结果：

first one;Hellofirst three;
second one;Hellosecond three;
another one;Helloanother three; 

• 实际运行结果：

first one;first three;
second one;second three;
another one;Helloanother three; 

问题复现代码 #

const c1 = document.querySelector('#container1');
const c2 = document.querySelector('#container2');
const c3 = document.querySelector('#container3');

let str = '<span class="item1">first one;</span>';
c1.insertAdjacentHTML('beforeend', str);
str = '<span class="item2">first two;</span>';
c1.insertAdjacentHTML('beforeend', str);
str = '<span class="item3">first three;</span>';
c1.insertAdjacentHTML('beforeend', str);

str = '<span class="item1">second one;</span>';
c2.insertAdjacentHTML('beforeend', str);
str = '<span class="item2">second two;</span>';
c2.insertAdjacentHTML('beforeend', str);
str = '<span class="item3">second three;</span>';
c2.insertAdjacentHTML('beforeend', str);

str = '<span class="item1">another one;</span>';
c3.insertAdjacentHTML('beforeend', str);
str = '<span class="item2">another two;</span>';
c3.insertAdjacentHTML('beforeend', str);
str = '<span class="item3">another three;</span>';
c3.insertAdjacentHTML('beforeend', str);

let elems = document.querySelectorAll('.item2');
console.log('all children', elems);
str = '<span data-rpl="item2" class="new">Hello</span>';
let newElem = makeElem(str);

elems.forEach((item, key) => {
  console.log('each', key, item);
  item.replaceWith(newElem);
});

function makeElem(str) {
  const template = document.createElement('template');
  template.innerHTML = str;
  return template.content.firstChild;
}

对应的测试HTML结构：

<div id="container1"></div>
<div id="container2"></div>
<div id="container3"></div>

核心问题是DOM节点为引用类型，同一个节点实例同一时间只能在DOM树中存在于一个位置。
代码在循环外仅调用一次makeElem(str)生成了唯一的newElem节点，后续forEach循环中反复执行item.replaceWith(newElem)时，浏览器对同一个节点的插入逻辑是：先将节点从原有挂载位置移除，再挂载到新的目标位置。
执行流程如下：

1. 第一次循环：newElem被插入第一个.item2所在位置，原第一个.item2节点被移除
2. 第二次循环：newElem自动从第一个位置脱离，插入到第二个.item2所在位置，第一个位置留空，原第二个.item2节点被移除
3. 第三次循环：newElem自动从第二个位置脱离，插入到第三个.item2所在位置，第二个位置留空
   循环结束后newElem仅会保留在最后一个匹配项的位置，前两个位置因为节点被移走，就表现为元素被擦除的现象。

将新元素的创建逻辑移动到循环内部，每次替换时生成一个全新的独立节点实例，避免复用同一个DOM节点。
修复后的核心替换逻辑：

let elems = document.querySelectorAll('.item2');
console.log('all children', elems);
const replaceTpl = '<span data-rpl="item2" class="new">Hello</span>';

elems.forEach((item, key) => {
  console.log('each', key, item);
  // 每次循环创建独立的新节点，不复用同一个实例
  const newElem = makeElem(replaceTpl);
  item.replaceWith(newElem);
});

function makeElem(str) {
  const template = document.createElement('template');
  template.innerHTML = str;
  return template.content.firstChild;
}

修改后运行即可得到预期的替换结果，三个.item2元素都会被独立的Hello节点替换。

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