i am trying to add spans to specific index in innerHtml of page

when i replace the old innerHtml with the new one > all the events in the page don't work

then i realize that the innerHtml make the events don't work >>

so how i can make this operation without loosing the events in the page ?

here is my code : -

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
}