I am trying to add a span to a exist div , this is the code :
const x = () => {
const starsDiv = document.getElementsByClassName("wrapper");
const span = document.createElement("span");
let starsArr = [];
let isHalf = false;
let numberOfStars;
for (let i = 0; i < starsDiv.length; i++) {
starsArr.push(starsDiv[i].children);
starsArr.map((item) => {
const length = item.length;
const starClass = item[item.length - 1].classList.value;
isHalf = starClass === "fa fa-star-half-o" ? true : false;
numberOfStars = isHalf ? length + 0.5 : length;
});
span.innerHTML = numberOfStars;
starsDiv.appendChild(span);
}
};
I get this error: Uncaught TypeError: starsDiv.appendChild is not a function hope you can help me figure my problem! thx
The problem is that starsDiv is not a single element. As per your code here:
const starsDiv = document.getElementsByClassName("wrapper");
getElementsByClassName returns an HTMLCollection - even if there is only one element retrieved: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
From here you need to append the span to a single element. Which element will depend on your HTML structure and where you want the span to appear. appendChild will make it appear as the last child of an element.