Tengo un problema con una animación que intento insertar en mi sitio web.

He escrito el siguiente JavaScript. Básicamente lo que hace es agregar una letra cada pocos segundos.

 function typeText(element, elementText, index = 0) { if (index < elementText.length) { element.textContent += elementText.charAt(index); index++; const typingSpeed = Math.floor(Math.random() * 100) + 30; setTimeout(() => typeText(element, elementText, index), typingSpeed); } }

Funciona bien hasta que tengo una etiqueta html anidada dentro de otra etiqueta html. Algo como esto:

 <h2> Some text <span class="blue-text"> some more text </span> </h2>

Lo que pasa es que "algún texto" está escrito correctamente pero cuando está por escribir el span, la máquina de escribir se ralentiza unos segundos y borra la etiqueta span con todos los estilos asociados y luego escribe el resto del texto.

Lo que necesito es que la función conserve el HTML. No sé cómo resolverlo y un enfoque CSS no funcionará porque la forma de hacer una animación de escritura no responde.