Esta pergunta já tem uma resposta aqui:

Quero fazer o seguinte: Quero ter um efeito de máquina de escrever em HTML / JavaScript (jQuery / jQuery UI, se necessário). Existem muitos exemplos excelentes de como criar um efeito de máquina de escrever em uma string (por exemplo,este) Eu quero fazer algo semelhante, mas com uma string HTML completa, que não deve ser digitada, mas inserida corretamente na página da web.

Exemplo de sequência:

<p>This is my <span style='color:red;'>special string</span> with an <img src="test.png"/> image !</p>

Essa sequência deve ser digitada com uma animação da máquina de escrever. A cor da "sequência especial" deve ser vermelha, mesmo durante a digitação, e a imagem deve aparecer após a palavra "an" e antes da palavra "imagem". O problema com as soluções existentes é que elas inserem o caractere de marcação por caractere na página da Web, o que resulta em um não fechado enquanto você digita a "sequência especial" neste exemplo. Eu considerei analisar a string com jQuery e iterar sobre a matriz, mas não tenho idéia de como lidaria com tags aninhadas (como p e span neste exemplo)