Veamos un ejemplo para descomponer una cadena en un conjunto de elementos span, cada uno de ellos conteniendo un solo carácter de la cadena.

1. Preparamos un bucle que recorra toda la cadena
2. A cada iteración (cada letra de la cadena) generamos un span con el carácter y lo almacenamos en una variable de salida.
3. Pasamos la salida al DOM

El método charAt() es equivalente a la psoición por índice, devuelve el cáracter en esa posición de la cadena: cadena[i] = cadena.charAt(i)

function casoUno() {
    let cadena = document.querySelector('#in_cadena').value;
    let salida = '';
    for (let i = 0; i < cadena.length; i++) {
        const caracter = cadena[i];
        salida += `<span>${caracter}</span>`;
    }
    document.querySelector('#caso1').innerHTML = salida;
}
                

Se trata de escribir la palabra en un input y reemplazar cada una de sus letras por un guión.

1. Guardar en una variable el texto del input que proporciona la palabra oculta
2. Crear un bucle con las mismas repeticiones que letras contiene la palabra oculta, generando un elemento span con un guión como contenido en cada iteración.
3. Pasamos los span al DOM y borramos el contenido del input

let palabra_oculta;                    
function comienzaAhorcado() {
    palabra_oculta = document.querySelector('#in_ahorcado').value;
    let casillas = '';
    for (let i = 0; i < palabra_oculta.length; i++) {
        casillas += '<span>-</span>';
    }
    document.querySelector('#casillero').innerHTML = casillas;
    document.querySelector('#in_ahorcado').value = '';
}
                

Fase 2. Propocionamos una letra y comprobamos si forma parte de la palabra oculta. En caso afirmativo la mostramos en el casillero, en caso contrario sumamos un error y guardamos la letra equivocada.

1. Si la letra está en la palabra llamo a la función que gestiona acierto, en caso contrario a la que gestiona el error, además de mostrar un mensaje personlizado en cada caso
2. El acierto consiste en comparar cada letra de la palabra oculta con la letra proporcionada, y cuando sean iguales colocar la letra como textContent del span con la misma posición que la letra encontrada
3. El fallo se gestiona añadiendo la letra introducida a la colección de letras falladas

function compruebaLetra() {
    let letra = document.querySelector('#in_letra').value;
    let mensaje = '';
    if (palabra_oculta.indexOf(letra) != -1) {
        mensaje = 'letra encontrada';
        muestraLetra(letra);
    } else {
        mensaje = 'letra fallada';
        letraFallada(letra);
    }
    document.querySelector('#mens_letra').textContent = mensaje;
}
function letraFallada(fallo) {
    document.querySelector('#out_falladas').textContent += fallo;
}
function muestraLetra(acertada) {
    let coleccion_casillas = document.querySelectorAll('#casillero span');
    for (let i = 0; i < palabra_oculta.length; i++) {
        const letra_oculta = palabra_oculta[i];
        if (letra_oculta == acertada) {
            coleccion_casillas[i].textContent = acertada;
        }
    }
}