Estoy tratando de hacer un módulo de javascript para reemplazar todas las apariciones de elementos html que tienen la clase .item2 . pero mi código a continuación solo reemplaza la última ocurrencia y borra las otras ocurrencias. ¿Qué estoy haciendo mal?
// 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>como si tuviera un bucle en .items2, debe insertar otra etiqueta en DOM para cada elemento del bucle
una idea puede ser clonar el newElem con
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>