title: Add span for specific index without get the events deleted
body: <p>i am trying to add spans to specific index in innerHtml of page</p>
  <p>when i replace the old innerHtml with the new one &gt; all the events in the page don't work</p>
  <p>then i realize that the innerHtml make the events don't work &gt;&gt;</p>
  <p>so how i can make this operation without loosing the events in the page ?</p>
  <p>here is my code  : -</p>
  <pre><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;
  
  
  </code></pre>
  <pre><code>for (let j = 0; j &lt; 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 &lt; count - 1) 
      {
          nextPhrase = str.substring(startInd[j + 1], lastInd[j + 1]);
      }
  
      str = pre + `&lt;span id=&quot;myHeader${i}&quot;&gt;${phrase}&lt;/span&gt;` + post; // make the new innerHtml
      newID = &quot;myHeader&quot; + i;
  
      if (j &lt; count - 1) 
      {
          startInd[j + 1] = str.indexOf(nextPhrase, startInd[j + 1]) - 1;
          lastInd[j + 1] = startInd[j + 1] + nextPhrase.length;
      }
  
      document.body.innerHTML = str
  }
  
  </code></pre>