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 >
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

CodePudding user response：

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 >
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

CodePudding user response：

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 >
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

CodePudding user response：

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 ></div>

Additional documentation

• Template/string literals

• insertAdjacentHTML