2

Este bucle debería cargar unas imágenes en el div:

for (i = 1; i <= 10; i++) {
    var imagen = document.createElement("img");n = document.createElement("img");
    var im = document.createElement("img");
    imagen.src = "C:\\Tarea de tio juego de cartas iguales\\Img\\" + i + ".jpg";
    im.src = "C:\\Tarea de tio juego de cartas iguales\\Img\\" + i + ".jpg";
    document.getElementsByTagName("div").appendChild(imagen);
    document.getElementsByTagName("div").appendChild(im);
}

Pero no lo hace y me lanza una excepción en la consola del navegador. Solo funciona si pongo document.body.appendChild pero me gustaría hacerlo con el div, para luego poder modificar sus estilos en CSS. También he probado usando getElementsByClassName y nada.

3
  • Pero nunca asignas nada para la variable n
    – Rodrigo
    Commented el 4 ago. 2023 a las 16:21
  • La razón por la que te lanza una excepción es porque tu computadora NO es un servidor web, puedes usar file:// antes de la ruta de los archivos para acceder localmente, pero si necesitas algo más dinámico, puedes descargarte un servidor web como XAMPP
    – Rodrigo
    Commented el 4 ago. 2023 a las 16:22
  • Porque getElementsByTagName tiene una S, fijate getElement S ByTagName, es decir, te devuelve una LISTA de elementos y esa lista no tiene la función appendChild, porque appendChild es una función de UN nodo
    – Yussef
    Commented el 4 ago. 2023 a las 16:23

1 respuesta 1

1

getElementsByTagName() devuelve una lista o colección de elementos, no un único elemento, por lo que no puedes usar directamente el método appendChild en toda la colección, sino en uno de sus elementos.

Para que visualices como es el comportamiento de getElementsByTagName, supongamos que tenemos varios div:

console.log(document.getElementsByTagName("div"));
<div>div 1</div>
<div>div 2</div>
<div>div 3</div>

Y así sea un único elemento, de todas formas te devuelve una colección:

console.log(document.getElementsByTagName("div"));
<div>div 1</div>

Por lo que necesitarías acceder a uno de los elementos (que son tus elementos div) y no a toda la colección directamente. Por ejemplo, si deseas aplicarle sólo al primer div, tendrías que acceder a la primera posición 0 colocando getElementsByTagName("div")[0], si deseas al segundo div, colocas getElementsByTagName("div")[1], sucesivamente:

for (i = 1; i <= 10; i++) {
  var imagen = document.createElement("img");
  n = document.createElement("img");
  var im = document.createElement("img");
  imagen.src = "C:\\Tarea de tio juego de cartas iguales\\Img\\" + i + ".jpg";
  im.src = "C:\\Tarea de tio juego de cartas iguales\\Img\\" + i + ".jpg";
  document.getElementsByTagName("div")[0].appendChild(imagen);
  document.getElementsByTagName("div")[0].appendChild(im);
}
<div>div con imagenes <br></div>
<div>div 2</div>
<div>div 3</div>

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.