2

Tengo una lista de objetos, y estoy haciendo una prueba para crear un innerHTML y que aparezca en la página. Hasta ahora bien, muy básico. Pero no me toma ningún appendChild que ponga. En consola me aparece "Cannot read property 'appendChild' of null". Qué puede ser?

Gracias!

const productos = [{
    id: 1,
    nombre: "Arroz",
    precio: 125
  },
  {
    id: 2,
    nombre: "Fideo",
    precio: 70
  },
  {
    id: 3,
    nombre: "Pan",
    precio: 50
  },
  {
    id: 4,
    nombre: "Flan",
    precio: 100
  }
];

for (const producto of productos) {
  let contenedor = document.createElement("div");

  contenedor.innerHTML = `<h3> ID: ${producto.id}</h3>
                            <p>  Producto: ${producto.nombre}</p>
                            <b> $ ${producto.precio}</b>`;

  document.getElementById("prueba2").appendChild(contenedor);
}
<section>
  <div id="prueba2">

  </div>
</section>

1
  • 3
    Pareciese que todo está bien, el snippet corre el código de manera exitosa.
    – FranAcuna
    Commented el 3 jun. 2021 a las 16:21

2 respuestas 2

1

Generalmentel el error:

introducir la descripción de la imagen aquí

Aparece cuando colocas el codigo javascript antes del html, aquí genero el error con tu codigo.

<script>
  const productos = [{
    id: 1,
    nombre: "Arroz",
    precio: 125
  },
  {
    id: 2,
    nombre: "Fideo",
    precio: 70
  },
  {
    id: 3,
    nombre: "Pan",
    precio: 50
  },
  {
    id: 4,
    nombre: "Flan",
    precio: 100
  }
];

for (const producto of productos) {
  let contenedor = document.createElement("div");

  contenedor.innerHTML = `<h3> ID: ${producto.id}</h3>
                            <p>  Producto: ${producto.nombre}</p>
                            <b> $ ${producto.precio}</b>`;

  document.getElementById("prueba2").appendChild(contenedor);
}
</script>
<section>
  <div id="prueba2">

  </div>
</section>

La solucion es entonces colocar el javascript despues del html

<section>
  <div id="prueba2">

  </div>
</section>
<script>
  const productos = [{
    id: 1,
    nombre: "Arroz",
    precio: 125
  },
  {
    id: 2,
    nombre: "Fideo",
    precio: 70
  },
  {
    id: 3,
    nombre: "Pan",
    precio: 50
  },
  {
    id: 4,
    nombre: "Flan",
    precio: 100
  }
];

for (const producto of productos) {
  let contenedor = document.createElement("div");

  contenedor.innerHTML = `<h3> ID: ${producto.id}</h3>
                            <p>  Producto: ${producto.nombre}</p>
                            <b> $ ${producto.precio}</b>`;

  document.getElementById("prueba2").appendChild(contenedor);
}
</script>

1
  • Muchas gracias, era eso, ya quedó solucionado! Commented el 3 jun. 2021 a las 18:48
1

Es probable que, en el código real de tu proyecto, el javascript esté ejecutándose antes que el navegador termine de cargar el documento y por ello, la llamada a getElementById devuelve null, pues ese elemento aún no ha sido cargado en el DOM.

Es probable que al preparar un ejemplo mínimo, al ser más simple el HTML, se perdiera ese efecto y, por eso, en tu pregunta el código funciona bien.

Hay varias alternativas para resolver el tema, todas pasan por esperar a que el DOM esté completamente cargado antes de ejecutar el código que depende de él. Bibliotecas como jQuery tienen métodos especializados con soporte multi-navegador, por ejemplo el $(document).ready().

Mi respuesta no tiene dependencias a estas bibliotecas, por lo que me baso en el evento "onload" del <body>, que se lanza cuando se termina de cargar este.

Lo que hay que hacer es meter el código en una función e invocarla en este evento:

const productos = [{
    id: 1,
    nombre: "Arroz",
    precio: 125
  },
  {
    id: 2,
    nombre: "Fideo",
    precio: 70
  },
  {
    id: 3,
    nombre: "Pan",
    precio: 50
  },
  {
    id: 4,
    nombre: "Flan",
    precio: 100
  }
];

function inicializar() {
  for (const producto of productos) {
    let contenedor = document.createElement("div");
  
    contenedor.innerHTML = `<h3> ID: ${producto.id}</h3>
                              <p>  Producto: ${producto.nombre}</p>
                              <b> $ ${producto.precio}</b>`;

    document.getElementById("prueba2").appendChild(contenedor);
  }
  }
<body onload="inicializar()">
  <section>
    <div id="prueba2">
  
    </div>
  </section>
</body>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.