así que estoy tratando de asignar imágenes de fondo al div sin el uso de CSS y lo escribo como 6 veces, así que este es el HTML:
var arImages = ["Chicken_BannerIcon2-1.png", "Chicken_BannerIcon3-1.png", "Chicken_BannerIcon4-1.png", "Chicken_BannerIcon5-1.png", "Chicken_BannerIcon6-1.png", "Chicken_BannerIcon7-3.png", ] var menu = document.querySelectorAll(".grid > div::before") let bg = arImages.map((element) => { return element; }) let newArray = Array.from(menu).map((item) => { var img = document.createElement("img") img.src = bg item.appendChild(img) return item }) <div class="grid pt-3"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div>querySelectorAll no encontró nada debido a ::before , así que lo eliminéimg.src = bg no funcionó porque bg era lo mismo que arImages y necesitará un solo índice en lugar de la matriz completa (consulte el punto 5)map a un forEach ya que no necesita un valor de retornoArray.from porque forEach existe en la lista de nodosindex proporcionado por foreach para obtener el índice de arImages var arImages = [ "Chicken_BannerIcon2-1.png", "Chicken_BannerIcon3-1.png", "Chicken_BannerIcon4-1.png", "Chicken_BannerIcon5-1.png", "Chicken_BannerIcon6-1.png", "Chicken_BannerIcon7-3.png", ] var menu = document.querySelectorAll(".grid > div") menu.forEach((item, index) => { var img = document.createElement("img") img.src = arImages[index] item.appendChild(img); }) <div class="grid pt-3"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div>Ni siquiera necesita predefinir sus elementos HTML. Puede map mediante programación sobre la matriz y crear una matriz de cadenas HTML utilizando los datos de cada elemento, join y luego aplicar esa cadena HTML completa al contenedor.
const arImages=['https://dummyimage.com/50x50/efefef/000000&text=Image1','https://dummyimage.com/50x50/efefef/000000&text=Image2','https://dummyimage.com/50x50/efefef/000000&text=Image3','https://dummyimage.com/50x50/efefef/000000&text=Image4','https://dummyimage.com/50x50/efefef/000000&text=Image5','https://dummyimage.com/50x50/efefef/000000&text=Image6']; // Just select the container const grid = document.querySelector('.grid'); // `map` over the array, and for each element return // an HTML string where the element has background that // matches the element const html = arImages.map((img, i) => { const style = `background-image: url(${img}); width: 50px; height: 50px`; return `<div style="${style}">${i + 1}</div>`; }); // Because `map` returns an array we `join` it up // into one string, and then add it to the container grid.insertAdjacentHTML('beforeend', html.join('')); <div class="grid pt-3"></div>Documentación adicional
Al principio, elimine el selector ::before .
Luego, solo necesita agregar el índice a su js y luego hacer referencia a su matriz de imágenes de esta manera:
var arImages = [ "Chicken_BannerIcon2-1.png", "Chicken_BannerIcon3-1.png", "Chicken_BannerIcon4-1.png", "Chicken_BannerIcon5-1.png", "Chicken_BannerIcon6-1.png", "Chicken_BannerIcon7-3.png" ]; document.querySelectorAll(".grid > div").forEach((item, index) => { var img = document.createElement("img"); img.src = arImages[index]; item.appendChild(img); }); <div class="grid pt-3"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div>