title: JavaScript - How do I display a text, character by character
body: <p>I'm trying to display a text taken from an array, character by character using JavaScript. I have managed to do it with one part of the array. I can't find a way of going to a newline and displaying the rest.</p>
  
  <pre><code>var container = document.getElementById("container");
  
  var notes = [
  {scenario: 1, intro: "This is the introduction.", que: "What is the weight of ....?"},
  {scenario: 2, intro: "This is the second scen.", que: "What is the second law of ...?"},
  {scenario: 3, intro: "This is the third thing.", que: "What is the third law of ...?"},
  ];
  
  
  function splTxt(txt) {
      // Split string into characters                                                                                                                                           
      t = txt.split('');
  return t
  }
  
  function terminal(cl, i) {
  // Create a div element and display message                                                                                                                               
  var div = document.createElement('div');
  div.className = cl;
  container.appendChild(div);
  
  // Take the first element of the array                                                                                                                                    
  // and extract the intro string                                                                                                                                           
  var txt = splTxt(notes[0].intro);
  var i = 0;
  
  // Display text, character by character                                                                                                                                   
  var display = setInterval(function() {
      div.textContent += txt[i];
      if (i == (txt.length-1)) {
          clearInterval(display);
      }
      i += 1
  }, 100);
  
  }
  
  terminal('blueTh', 0);
  </code></pre>
  
  <p>After it displayed <code>notes[0].intro</code>, I'd like it to go to a new line and display <code>notes[0].que</code>.</p>
  
  <p>I have tried to do</p>
  
  <pre><code>var txt = splTxt(notes[0].intro + '&lt;br /&gt;' +  notes[0].que);
  </code></pre>
  
  <p>But obviously, it just displays <code>&lt;br /&gt;</code> and prints both messages on the same line.</p>