Estoy tratando de agregar intervalos a un índice específico en el HTML interno de la página.

cuando reemplazo el viejo innerHtml con el nuevo> todos los eventos en la página no funcionan

luego me doy cuenta de que innerHtml hace que los eventos no funcionen >>

Entonces, ¿cómo puedo hacer esta operación sin perder los eventos en la página?

aquí está mi código: -

 var startInd = [50]; //the index of word in innerHtml var lastInd = [55]; //the last index of word in innerHtml(its length)(the spanned area) var str = document.body.innerHTML; var count = 1;

 for (let j = 0; j < count; j++) // count always 1 { let pre = str.substring(0, startInd[j]); // all html elements before the word let post = str.substring(lastInd[j], str.length); // all html elements after the word let phrase = str.substring(startInd[j], lastInd[j]); // the word let nextPhrase; if (j < count - 1) { nextPhrase = str.substring(startInd[j + 1], lastInd[j + 1]); } str = pre + `<span id="myHeader${i}">${phrase}</span>` + post; // make the new innerHtml newID = "myHeader" + i; if (j < count - 1) { startInd[j + 1] = str.indexOf(nextPhrase, startInd[j + 1]) - 1; lastInd[j + 1] = startInd[j + 1] + nextPhrase.length; } document.body.innerHTML = str }