I made an icon with this JavaScript, but the icon can't be displayed, is there something wrong ?
window.addEventListener('load', () => {
let featuredFoods = document.querySelectorAll('.bintang');
let starIcon = document.createElement('i');
starIcon.classList.add('far.fa-star');
featuredFoods.forEach((el) => {
el.append(starIcon,starIcon,starIcon,starIcon,starIcon);
})
})Just use a string for the star HTML, and then create a new array with five elements, and fill each element with a star icon making sure you create a string of HTML from the array with join to use in the innerHTML.
let featuredFoods = document.querySelectorAll('.bintang');
const starIcon = '<i class="fa fa-star"></i>';
featuredFoods.forEach(el => {
const stars = new Array(5).fill(starIcon).join('');
el.innerHTML = stars;
});<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
<div class="bintang"></div>
<div class="bintang"></div>
<div class="bintang"></div>
<div class="bintang"></div>
<div class="bintang"></div>