如何替换javascript中所有出现的html元素？

Question

我正在尝试制作一个 javascript 模块来替换所有出现的具有类.item2的 html 元素。 但我下面的代码仅替换最后一次出现并删除其他出现。 我究竟做错了什么？

// 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 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; }

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

Answer 1

就像您在 .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 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.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>