2

Tengo el siguiente HTML:

<div class="tabla">
     <div class="impostores">
          //Contenido del forEach
     </div>
</div>

Tengo el siguiente código JS:

Primeramente un array de objetos:

let jugadores = [
    {"nombre": "Vladi","id": "rojo"},
    {"nombre": "Melen","id": "azul"},
    {"nombre": "Gabri","id": "verde"},
    {"nombre": "Lucia","id": "amarillo"},
    {"nombre": "Brian","id": "morado"},
    {"nombre": "Jesús","id": "turquesa"},
    {"nombre": "David","id": "rosa"},
    {"nombre": "Dario","id": "negro"},
    {"nombre": "Mario","id": "blanco"}
];

Seguidamente el forEach que recorre los elementos del array de objetos:

jugadores.forEach(function(jugador) {
    console.log("Nombre: " + jugador.nombre +" |"+ " Edad: " + jugador.id);
    let div = document.createElement("div");
    
    div.textContent = jugador.nombre;
    div.className = "impostor";
    div.id = jugador.id;
    console.log(div);
    divConDatos = div;
});

Además se duplica el último elemento:

¿Cómo podría insertar el divConDatos en el div con la clase impostores ?

0

1 respuesta 1

3

Ya has hecho casi todo

Ya has hecho casi todo el trabajo. Solo tienes que modificar algunas cosas.

Por ejemplo, agregar en tu código JavaScript la siguiente línea:

const impostores = document.querySelector(".impostores");

Para tener referencia al elemento HTML que contiene la clase impostores y luego, ubicarlo en:

jugadores.forEach(function() {
    ...
    impostores.append( div );
});

Veamos esto funcionando en la siguiente Demo utilizando el mismo código que has utilizado, pero con un mínimo cambio que he comentado:

// Hacemos referencia al elemento que contiene la clase 
// «impostores»:
const impostores = document.querySelector(".impostores");

let jugadores = [
  { nombre: "Vladi", id: "rojo" },
  { nombre: "Melen", id: "azul" },
  { nombre: "Gabri", id: "verde" },
  { nombre: "Lucia", id: "amarillo" },
  { nombre: "Brian", id: "morado" },
  { nombre: "Jesús", id: "turquesa" },
  { nombre: "David", id: "rosa" },
  { nombre: "Dario", id: "negro" },
  { nombre: "Mario", id: "blanco" }
];

jugadores.forEach(function(jugador) {
  let div = document.createElement("div");

  div.textContent = jugador.nombre;
  div.className = "impostor";
  div.id = jugador.id
  
  // Agregando cada impostor al elemento que contiene 
  // la clase impostores:
  impostores.append(div);
});
<div class="tabla">
  <div class="impostores"></div>
</div>

Si desde el navegador Web inspeccionas los elementos que contienen la clase impostor podrás observar que efectivamente se han insertado dentro del elemento con la clase impostores.

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.