一文字ずつHTML文法文字を出力する

新年明けましておめでとうございます。

<span style="color:red">ほげ<br />ほげ</span>ほげ？

こんな文字列を一文字ずつ画面に表示したいけど、普通にやったら<span style="color:red"まで普通に文字として表示されてしまう。その次に突然これらが消えて以降の文字が真っ赤っか。。。

改行文字が出力できない、という知人からの話を聞き、取りあえず作ってみました。
siterator.js
使用例

var t = "テストテスト　改行します\n<span style=\"color:red\">色つき<b>文字です</span>\n終わり</b>ます。";
var si = new StringIterator(t,true);
function test(){
       if(si.hasNext()){
               document.getElementById("test").innerHTML = si.next();
               setTimeout(test,500);
       }
}
test();