I cannot show at the DOM properly

I have question. I have this whole code and whent I want to submit the form and to show it at the HTML, the thing is only showed when I refresh the web page. What can I do? Itried putting the code inside of the event but didn´t work properly. Help please. I didn´t add the whole code because was too much.

https://github.com/peladno/JS28160JavierPerez this is the repo if you want to see the complete code

let listaIngredientes = []; 
let recetas = [];

formReceta.addEventListener('submit', (e) => { 

  const ingredienteReceta = new Ingrediente (ingrediente, cantidad, medida, precio);
    listaIngredientes.push(ingredienteReceta);

  let copiaListaingredientes = [...listaIngredientes]

  const receta = new Receta (nombreReceta, procedimiento, descripcion, 
  copiaListaingredientes);
  recetas.push(receta)
  localStorage.setItem('recetasLocales', JSON.stringify(recetas));
  
})

//creacion div container
const divContainer = document.createElement("div");
divContainer.className = "row";

  for (let i = 0; i < recetasLocales.length; i++) {

    //se crea div que contiene una receta
    const divReceta = document.createElement("div");
    divReceta.className = "card border-info mb-3";
    divReceta.style = "max-width: 20rem;";
  
    const titulo = document.createElement("div");
    titulo.textContent = `${recetasLocales[i].nombreReceta}`;
    titulo.className = "card-header";
  
    const subTitulo = document.createElement ("h3");
    subTitulo.textContent = `Ingredientes`
  
    const parrafo = document.createElement("p")
    parrafo.textContent = `${recetasLocales[i].procedimiento}`;
    
      //se crea lista
    const lista = document.createElement("ul");
    for (let j = 0; j < recetasLocales[i].ingredientes.length; j++) {
      const element = recetasLocales[i].ingredientes[j].cantidad + " " + 
    recetasLocales[i].ingredientes[j].unidadDeMedida + " " + 
    recetasLocales[i].ingredientes[j].nombre + " ";
        //se crea nueva lista
      const listaItem = document.createElement("li");
      listaItem.textContent = element;
        //se agrega ingrediente a la lista
      lista.appendChild(listaItem);
    }
    
      //se agrega todo junto a los div en orden
    divContainer.appendChild(divReceta);    
    divReceta.appendChild(titulo);
    divReceta.appendChild(subTitulo);
    divReceta.appendChild(lista);
    divReceta.appendChild(parrafo)
  }
    //se carga contenido al DOM
    document.addEventListener("DOMContentLoaded", function () {
      const content = document.getElementById('listaRecetas');
      content.appendChild(divContainer);
    });