title: element.innerHTML = something is slow in preformance, is there a faster way to change innerHTML?
body: <p>I need to change innerHTML to add style to PART OF text. However, I notice that using element.innerHTML = something really slows downs my function especially I have an array of >100 to change. </p>
  
  <p>So is there a better way in terms of performance to add style to innerHTML?</p>
  
  <p>Or is there a way to display text like innerHTML without using innerHTML?</p>
  
  <p>My function just in case:</p>
  
  <pre><code>for (var i = 0; i &lt; x.length; i++) {
          if(x[i].lastChild.className == "overlay"){
              //x[i].lastChild.innerHTML = x[i].lastChild.innerHTML.replace(/(&lt;u&gt;|&lt;\/u&gt;)/igm, "");
  
              if(!regexp.test(x[i].lastChild.innerHTML)){
                  x[i].lastChild.style.opacity = 0;
  
              }else{
                  x[i].lastChild.style.opacity = globalOpacityValue;
  
                  //x[i].lastChild.innerHTML = x[i].lastChild.innerHTML.replace(/'"&gt;'+tempStore/,'"&gt;&lt;u&gt;'+tempStore+'&lt;/u&gt;');
  
                  if(x[i].lastChild.innerHTML=='&lt;span style="color:'+textColor+'"&gt;' + tempStore + '&lt;/span&gt;'){
                      x[i].lastChild.style.borderWidth = "thick";
                      x[i].lastChild.style.borderStyle = "solid";
                  }
  
              }        
          }
      }
  </code></pre>
  
  <p>I am pretty sure the slow-down of performance comes from the innerHTMLs, because it happens once I take off the comments. </p>