Assigning background images to a querySelectorall function JS

Question

so I am trying to assign background images to the div without the use of CSS and writing it like 6 times so this is the 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>

Answer 1

1. Your querySelectorAll didn't find anything because of the ::before, so I've removed that
2. The img.src = bg didn't work because bg was the same as arImages and you'll need a single index instead of the complete array (see point 5)
3. I've replace the map to a forEach since you don't need a return value
4. Removed the Array.from because forEach exists on the nodelist
5. Using the index provided by the foreach to get the index from 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>

Answer 2

At first, remove the ::before selector.

Then you just need to add the index to your js and then referencing that to your images array like so:

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>

Answer 3

You don't even need to predefine your HTML items. You can programmatically map over the array and create an array of HTML strings using the data from each element, join it up, and then apply that complete HTML string to the container.

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>

Additional documentation

• Template/string literals

• insertAdjacentHTML