title: Typewriter-Effect for HTML with JavaScript
body: <p>I want to do the following: I want to have a typewriter effect in HTML/JavaScript (jQuery/jQuery UI, if needed). There are tons of great examples out there on how to create a typewriter effect on a string (for example <a href="https://stackoverflow.com/questions/13325008/typewriter-effect-with-jquery">this one</a>). I want to do something similar, but with a complete HTML string, which shouldn't be typed out, but inserted properly into the web page.</p>
  
  <p>Example string: </p>
  
  <pre><code>&lt;p&gt;This is my &lt;span style='color:red;'&gt;special string&lt;/span&gt; with an &lt;img src="test.png"/&gt; image !&lt;/p&gt;
  </code></pre>
  
  <p>This string should be typed with a typewriter animation. The color of "special string" should be red, even while typing, and the image should appear after the word "an" and before the word "image". The problem with the solutions out there is that they insert the markup character by character into the web page, which results in an unclosed  while typing the "special string" in this example. I considered parsing the string with jQuery and iterating over the array, but I have no idea how I would deal with nested tags (like p and span in this example)</p>