title: Randomize letter color in javascript
body: <p>I am trying to create a script that gives each individual letter inside "p" tags on my website a random color. The coloring part works fine, the problem is that my script overwrites "br" and "a" tags. Is there any workaround for this?</p>
  
  <p>Here is my code so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function changeColor() {
      var paragraphs = document.getElementsByTagName("p");
     
      for(var i = 0; i &lt; paragraphs.length; i++)
      {
          var innerText = paragraphs[i].innerText;
          var innerTextSplit = innerText.split("");
          paragraphs[i].innerText = ""
         
          for(var j = 0; j &lt; innerTextSplit.length; j++) {
              var randomColor = "rgb(" + Math.floor((Math.random() * 255) + 1) + ", " + Math.floor((Math.random() * 255) + 1) + ", " + Math.floor((Math.random() * 255) + 1) + ");"
   
              innerTextSplit[j] = '&lt;span style="color: ' + randomColor + '"&gt;' + innerTextSplit[j] + '&lt;/span&gt;';
              paragraphs[i].innerHTML += innerTextSplit[j];
          }
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help is greatly appreciated, thanks in advance :)</p>
  
  <p>-jAndersen</p>