构建无限滚动轮播时出现appendChild不是函数错误，如何修复？

核心错误原因 #

你遇到的infinateScroll.appendChild is not a function报错，根源是：

• var infinateScroll = document.querySelectorAll(".infinate-scroll"); 中，querySelectorAll返回的是NodeList（节点集合），而appendChild是单个DOM元素的方法，NodeList没有这个方法，所以调用失败。

额外衍生问题 #

除了核心错误，代码还有两处会导致功能失效的问题：

1. 克隆元素时添加的类是js-clone，但后续获取克隆元素用了.js-clones（多了一个s），导致clones数组为空，无法正确计算克隆元素总宽度。
2. window.onload = onLoad(); 这里直接执行了onLoad函数，应该赋值函数引用而非执行结果，否则页面加载初期就会运行函数，可能DOM还未完全渲染完成。

修复步骤 #

1. 获取单个DOM元素：将document.querySelectorAll改为document.querySelector，获取目标容器的单个DOM元素（如果页面存在多个.infinate-scroll容器，需要遍历处理，但根据你的代码逻辑应为单个容器）。
2. 修正类名拼写：将获取克隆元素的选择器从.js-clones改为.js-clone。
3. 修正window.onload赋值：去掉函数后的括号，改为window.onload = onLoad;，确保页面加载完成后再执行函数。

修复后的完整代码 #

var infinateScroll = document.querySelector(".infinate-scroll");
var infinateScrollItems = document.querySelectorAll(".infinate-scroll .iscroll-item");
let clones = [];
let disableScroll = false;
let scrollWidth = 0;
let scrollPosition = 0;
let clonesWidth = 0;

function getScrollPosition() {
    return infinateScroll.scrollLeft;
}

function setScrollPosition(e) {
    infinateScroll.scrollLeft = e;
}

function getClonesWidth() {
    clonesWidth = 0;
    
    clones.forEach(clone => {
        clonesWidth += clone.offsetWidth;
    });
    
    return clonesWidth;
}

function reCalc() {
    scrollPosition = getScrollPosition();
    scrollWidth = infinateScroll.scrollWidth;
    clonesWidth = getClonesWidth();
    
    if(scrollPosition <= 0) {
        setScrollPosition(1);
    }
}

function scrollUpdate() {
    if(!disableScroll) {
        scrollPosition = getScrollPosition();
        if(clonesWidth + scrollPosition >= scrollWidth) {
            setScrollPosition(1);
            disableScroll = true;
        } 
        
        else if (scrollPosition <= 0) {
            setScrollPosition(scrollWidth - clonesWidth);
            disableScroll = true;
        }
    }
    
    if(disableScroll) {
        window.setTimeout(() => {
            disableScroll = false;
        }, 40);
    }
}

function onLoad() {
    infinateScrollItems.forEach(ScrollItem => {
        const cloneItems = ScrollItem.cloneNode(true);
        infinateScroll.appendChild(cloneItems);
        cloneItems.classList.add('js-clone');
    });
    
    clones = infinateScroll.querySelectorAll('.js-clone');
    
    reCalc();
    
    infinateScroll.addEventListener('scroll', () => {
        window.requestAnimationFrame(scrollUpdate);
    }, false);
    
    window.addEventListener('resize', () => {
        window.requestAnimationFrame(reCalc);
    }, false);
}

window.onload = onLoad;

内容的提问来源于stack exchange，提问作者Jason_C