向已有div添加span元素时出现Uncaught TypeError: starsDiv.appendChild is not a function错误的求助

你遇到的Uncaught TypeError: starsDiv.appendChild is not a function错误，核心原因是**document.getElementsByClassName()返回的是一个HTMLCollection（类数组对象），而不是单个DOM元素**，你直接调用starsDiv.appendChild()当然会报错——这个集合本身没有appendChild方法，只有单个DOM元素才有。

咱们一步步拆解问题，再给出修复方案：

1. 核心错误：操作集合而非单个元素 #

const starsDiv = document.getElementsByClassName("wrapper");得到的是所有class为wrapper的元素集合，你在循环里应该操作starsDiv[i]（单个元素），而不是直接操作starsDiv这个集合本身。

2. 其他潜在问题 #

• starsArr.map(...)在这里没必要用map，map是用来返回新数组的，你只是遍历元素，用forEach更合适；而且numberOfStars变量在map里赋值，会因为作用域问题导致最后拿到的可能不是预期值
• 每次循环都应该创建新的span元素，不然所有wrapper会共用同一个span，最后只会显示在最后一个元素里
• starsArr.push(starsDiv[i].children);这里存入数组的是子元素集合，后续处理容易混乱，直接在循环里处理当前的starsDiv[i]就足够了，不需要额外存数组

修复后的代码 #

const x = () => { 
    const starsDivs = document.getElementsByClassName("wrapper"); 
    // 遍历每个wrapper元素
    for (let i = 0; i < starsDivs.length; i++) { 
        const currentDiv = starsDivs[i];
        const children = currentDiv.children;
        let isHalf = false; 
        let numberOfStars; 

        // 检查最后一个子元素是否是半星
        if (children.length > 0) {
            const lastChildClass = children[children.length - 1].classList.value; 
            isHalf = lastChildClass === "fa fa-star-half-o"; 
            // 修正半星计算逻辑：半星本身算0.5，所以总星数是（全星数量）+0.5
            numberOfStars = isHalf ? (children.length - 1) + 0.5 : children.length; 
        } else {
            numberOfStars = 0; // 处理没有子元素的边界情况
        }

        // 每个div都创建独立的span
        const span = document.createElement("span"); 
        span.innerHTML = numberOfStars; 
        currentDiv.appendChild(span); 
    } 
};

代码说明 #

• 把变量名改成starsDivs更直观，明确这是多个元素的集合
• 循环中每次取当前的currentDiv，操作这个单个元素的appendChild方法
• 移除了没必要的starsArr，直接处理当前div的子元素，简化逻辑
• 修正了半星的计算逻辑：如果最后一个子元素是半星，总星数应该是（子元素数量-1）+0.5——原来的写法会把半星当成完整星再加0.5，结果会多算1个
• 增加了子元素为空的边界处理，避免出现无意义的计算或报错

内容的提问来源于stack exchange，提问作者עמית שוקרון