如何替換javascript中所有出現的html元素？

我正在嘗試制作一個 javascript 模塊來替換所有出現的具有 class 的 html 元素.item2。但我下面的代碼僅替換最后一次出現并洗掉其他出現。我究竟做錯了什么？

// before replacement
/* 
first one;first two;first three;
second one;second two;second three;
another one;another two;another three; 
*/

// expected result
/* 
first one;Hellofirst three;
second one;Hellosecond three;
another one;Helloanother three; 
*/

// what I currently get
/* 
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 >first one;</span>';
c1.insertAdjacentHTML('beforeend', str);
str = '<span >first two;</span>';
c1.insertAdjacentHTML('beforeend', str);
str = '<span >first three;</span>';
c1.insertAdjacentHTML('beforeend', str);

str = '<span >second one;</span>';
c2.insertAdjacentHTML('beforeend', str);
str = '<span >second two;</span>';
c2.insertAdjacentHTML('beforeend', str);
str = '<span >second three;</span>';
c2.insertAdjacentHTML('beforeend', str);

str = '<span >another one;</span>';
c3.insertAdjacentHTML('beforeend', str);
str = '<span >another two;</span>';
c3.insertAdjacentHTML('beforeend', str);
str = '<span >another three;</span>';
c3.insertAdjacentHTML('beforeend', str);

let elems = document.querySelectorAll('.item2');
console.log('all children', elems);
str = '<span data-rpl="item2" >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;
}

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

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

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

uj5u.com熱心網友回復：

就像您在 .items2 上有一個回圈一樣，您必須在 DOM 中為回圈的每個元素插入另一個標簽

一個想法可以是克隆 newElem

 item.replaceWith(newElem.cloneNode(true));

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

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

str = '<span >second one;</span>';
c2.insertAdjacentHTML('beforeend', str);
str = '<span >second two;</span>';
c2.insertAdjacentHTML('beforeend', str);
str = '<span >second three;</span>';
c2.insertAdjacentHTML('beforeend', str);

str = '<span >another one;</span>';
c3.insertAdjacentHTML('beforeend', str);
str = '<span >another two;</span>';
c3.insertAdjacentHTML('beforeend', str);
str = '<span >another three;</span>';
c3.insertAdjacentHTML('beforeend', str);

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

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

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

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

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

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

標籤：javascript

上一篇：分析Marklogic搜索請求

下一篇：在vue3中重置組件的反應資料的最佳方法是什么？