My innerHTML doesn't work and I don't know why?

I want to add nums and the alphabet when I click:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Añadir letras y números</title>

    <style>
        .carpeta{
            border: 2px solid blue;
            display: inline-flex;
        }
    </style>

</head>
<body>

    <div class="carpeta">
        <span>
          <h4>Abecedario</h4>
          <button onclick="anadirLetra()">Otra letra</button>
        </span>
    </div>

    <div class="carpeta">
        <span>
            <h4>Números</h4>
        </span>
        <span>
         <button onclick="anadirNum()">Otro número</button>
        </span>
    </div>


    <script>    
        var letras = ["A", "B", "C", "D", "E"];
        var indiceABC = 0; /* posición de la primera letra del vector */
        var numero = 1; /* primer número a escribir */

        function anadirLetra(){
            var p1 = document.createElement("p");
            document.getElementsByTagName("p").innerHTML.innerHTML = letras[1];
        }

        function anadirNum(){
            var p2 = document.createElement("p");
            document.getElementsByTagName("p").innerHTML.innerHTML = numero;
        }
    </script>
    
</body>
</html>

I know i have to create a counter, but the first step doesn't work, and I dont know why. The finality is to add a 1, and then 2, 3, 4, etc. But this code can't print me even the 1...

How can I solve this?

Solution

When you create a element you must attach it to other element in document in order they show, example: (document.getElementById("Abecedario").append(p1);)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Añadir letras y números</title>

    <style>
        .carpeta{
            border: 2px solid blue;
            display: inline-flex;
        }
    </style>

</head>
<body>

    <div class="carpeta">
        <span>
          <h4 id="Abecedario">Abecedario</h4>
          <button onclick="anadirLetra()">Otra letra</button>
        </span>
    </div>

    <div class="carpeta">
        <span>
            <h4 id="numeros">Números</h4>
        </span>
        <span>
         <button onclick="anadirNum()">Otro número</button>
        </span>
    </div>


    <script>    
        var letras = ["A", "B", "C", "D", "E"];
        var indiceABC = 0; /* posición de la primera letra del vector */
        var numero = 1; /* primer número a escribir */

        function anadirLetra(){
            var p1 = document.createElement("p");
            p1.innerHTML = letras[1];
            document.getElementById("Abecedario").append(p1);
        }

        function anadirNum(){
            var p2 = document.createElement("p");
            p2.innerHTML = numero;
            document.getElementById("numeros").append(p2);
        }
    </script>
    
</body>
</html>