Trying to add a span to an exist div getting error-CodePudding

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

CodePudding user response：

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.