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>querySelectorAll didn't find anything because of the ::before, so I've removed thatimg.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)map to a forEach since you don't need a return valueArray.from because forEach exists on the nodelistindex provided by the foreach to get the index from arImagesvar 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>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
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>