 <p>You may need to decode the HTML string. Try this:</p> <pre><code>var decodedString = $("&lt;div /&gt;").html(text.substring(index, (index+speed))).html(); $("#console").append(decodedString); </code></pre> <p>This basically creates a div, parses and creates the html inside that div. Then we get the html from the div and append where we actually want it to be.</p> <p><strong>EDIT</strong>:</p> <p>So your issue is that you are breaking up <code>&lt;span&gt; This is a test &lt;/span&gt;</code> into smaller chunks. Appending any partial html will never work. jQuery can't properly parse it. <code>&lt;spa</code> + <code>n&gt;stuff</code> + <code>&lt;/sp</code> + <code>an&gt;</code> can not be individually inserted and expect it to be rendered correctly. Sometimes jQuery will try to fill in missing parts but don't rely on that. Instead break your text up into spans:</p> <pre><code>var decoded1 = $("&lt;div /&gt;").html("&lt;span&gt; Thi&lt;/span&gt;").html(); var decoded2 = $("&lt;div /&gt;").html("&lt;span&gt;s is a tes&lt;/span&gt;").html(); var decoded3 = $("&lt;div /&gt;").html("&lt;span&gt;t &lt;/span&gt;").html(); $("#console").append(decoded1); $("#console").append(decoded2); $("#console").append(decoded3); </code></pre> <p>And then of course you will no longer need to decode anything. You can just directly append those pieces and it will work.</p> <pre><code>$("#console").append("&lt;span&gt; Thi&lt;/span&gt;"); $("#console").append("&lt;span&gt;s is a tes&lt;/span&gt;"); $("#console").append("&lt;span&gt;t &lt;/span&gt;"); </code></pre>