Challenge - innerHTML | Alura Latam - Cursos online de tecnologia

Hola que tal, tengo una duda con respecto al challenge, no se como hacer para que Javascript no me borre mi diseño a la hora de imprimir el mensaje encriptado, estuve leyendo alguna documentación y ví que utilizan innerhtml pero eso me sigue eliminando mi diseño, adjunto mi código. Quiero modificar la imagen con id "muñeco" pero estoy utilizando el paraffo con id "mala" para ver si se modifica o no.

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">
        <title>Encriptacion - Mensaje</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">
        <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Chivo+Mono:ital,wght@1,200&display=swap" rel="stylesheet">

    </head>

    <body>
        <header>
            <img src="logo.jpg" alt="logo-alura" class="logo-a">    
        </header>

        <main>

            <p class="requisito">&#9888 Solo letras minúsculas y sin acentos</p>

            <form>
                <textarea cols="50" rows="22" id="mensaje" class="input-mensaje" required placeholder="Pon aquí tu mensaje" ></textarea>

                <input type="submit" value="Encriptar" id="encriptar">
                <input type="submit" value="Desencriptar" id="desencriptar"> 
            </form>

            <div class="parent">

                <img src="rectangulo.jpg" alt="rectangulo" class="recuadro">
                <img src="muñeco.jpg" alt="muñeco" class="muñeco" id="muñeco">
                <p class="noencontrado">No se ha encontrado ningún mensaje</p>
                <p id="mala"> hola  </p>

            </div>
            <script>
                // Este es para el mensaje a encriptar
                var input = document.getElementById("mensaje");
                var encriptar = document.getElementById("encriptar");
                var mala = document.getElementById("mala")


                function imprimir(frase){
                    document.write(frase);

                }

                function cambiaVocal(){

                    var letras = input.value;
                    var listaLetras = letras.split("");
                    var cantidadLetras = letras.length;

                    for(var contador = 0; contador < cantidadLetras; contador++)

                        if(listaLetras[contador] == "a"){

                            mala.innerHTML = "ai"
                        }
                        else if(listaLetras[contador] == "e"){
                            mala.innerHTML = "enter"
                        }
                        else if(listaLetras[contador] == "i"){
                            mala.innerHTML = "imes"
                        }
                        else if(listaLetras[contador] == "o"){
                            mala.innerHTML = "ober"
                        }
                        else if(listaLetras[contador] == "u"){
                            mala.innerHTML = "ufat"
                        }
                        else if(listaLetras[contador] == " "){
                            mala.innerHTML = " "
                        }
                        else{
                            mala.innerHTML = listaLetras[contador]
                        }


                }

                encriptar.onclick = cambiaVocal;
            </script>



        </main>

        <footer>
            <p class="datos">Autor: Cristian Alejandro Enciso Alvarez</p>

        </footer>


    </body>

</html>