title: How do I display two messages with a delay in between?
body: <p>When the user presses a button I want to display two messages where the second message displays a few seconds after the first.  The first message should be left alone while the second one displays.  So here are the steps.</p>
  
  <ol>
  <li>User presses button</li>
  <li>Message 1 displays</li>
  <li>Wait a few seconds</li>
  <li>Message 2 displays under message 1</li>
  </ol>
  
  <p>I've searched quite a bit but no suggestion is working.  I've tried various techniques about accessing a property on the message element to force it to be drawn.  However nothing is working for displaying a second message after a delay while leaving the first message on the screen.  Can someone solve this with a working example for IE 11?</p>
  
  <p>The following code doesn't work.</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="message1"&gt;&lt;/div&gt;
      &lt;div id="message2"&gt;&lt;/div&gt;
  
      &lt;script type="text/javascript"&gt;
          $('#message1').html("first");
          waitThreeSeconds();
          $('#message2').html("second");
      &lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>This code also doesn't work.</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="message1"&gt;&lt;/div&gt;
      &lt;div id="message2"&gt;&lt;/div&gt;
  
      &lt;script type="text/javascript"&gt;
          $('#message1').html("first");
          $('#message1').css('height', 'auto');
          $('#message1').height();
  
          waitThreeSeconds();
  
          $('#message2').html("second");
          $('#message2').css('height', 'auto');
          $('#message2').height();
      &lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>