试图将跨度添加到现有的div中时出错

Question

我正试图将一个跨度添加到现有的div中，这是代码：

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);
}
};

我收到以下错误：未捕获的类型错误：starsDiv.appendChild不是函数希望你能帮我解决问题！thx

Answer 1

问题是starsDiv不是单个元素。根据您的代码：

const starsDiv = document.getElementsByClassName("wrapper");

getElementsByClassName返回一个HTMLCollection-即使只检索到一个元素：https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

从这里开始，您需要将跨度附加到单个元素。哪个元素将取决于您的HTML结构以及您希望跨度出现在哪里。appendChild将使其显示为元素的最后一个子级。