title: HTML isn't interpreted correctly when injecting '<br>' strings into innerHTML
body: <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>'use strict';                                     
  
  function injectCharacters(){
    var paragraph = document.getElementById( 'paragraph' ),
        text = paragraph.innerHTML,
        ary = text.split( '' ),
        i = 1;
    
    paragraph.innerHTML = '';
    
    for ( i; i &lt;= 52 ; i++ ){
      window.setTimeout(
        ( 
          function( i ){ 
            return function(){
              paragraph.innerHTML +=  ary[ i ];
            }
          } 
        )
        ( i ), i * 100 
      )
    }
  }
  
  injectCharacters();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0;
  }
  html,
  body {
    overflow: hidden;
    height: 100%;
  }
  body {
    display: flex;
    font-family: Arial;
  }
  p {
    margin: auto;
  }
  .mtx-3d {
    transform:
      perspective( 10rem )
      matrix3D( 
        1, 0.25, 0.5, 0.0075,
        0.25, 2, 2, 0.02,
        1, 2, 3, 4,
        1, 2, 3, 0.75 
      )
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p id="paragraph" class="mtx-3d"&gt;
    So. Yeah I mean. &lt;br&gt;I've been thinking &lt;br&gt;A lot
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In the snippet above the line breaks are literal in the output. I want an actual line-break to display instead of seeing <code>&lt;br&gt;</code>. How can I solve this simple problem?</p>
  
  <p>I suspect it has something to do with me breaking up every character into a value housed in an array then outputting that back to the paragraph element but I could be wrong.</p>