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

Question

I'm trying to make a javascript module to replace all occurrences of html elements that has the class .item2 . but my code below only replaces the last occurrence and erases the other occurrences. what am I doing wrong?

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

like you have a loop on .items2 you have to insert another tag in DOM for each element of the loop

an idea can be to clone the newElem with

 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>