使用innerHTML添加元素时触发无限循环的技术求助

问题根源 #

你遇到的无限循环，核心原因是document.getElementsByClassName("select")返回的是动态HTMLCollection——这个集合会实时响应DOM的变化。每次循环中，你向当前.select元素里添加了新的.select元素（selectItems生成的HTML包含<div class="select">），导致eles.length不断增长，循环条件i < eles.length永远无法满足终止条件，最终陷入无限循环。

解决方案 #

方案1：将动态集合转为静态数组

把HTMLCollection转成普通数组，数组的长度是固定的，不会随DOM变化而更新：

const myElement = document.createElement("div");
let selectItems = data.map((select, i) => (
    `<div class="select">
        <div aria-required="true" class="selectBtn" data-type="">${select.placeholder}</div>    
            <div class="selectDropdown">${select.option.map(el =>
                    `<div class="option" data-type="firstOption">${el}</div>`
            ).join('')}
        </div>
    </div>`)
)

// 转为静态数组
const eles = Array.from(document.getElementsByClassName("select"));
for (let i = 0; i < eles.length; i++) {
    myElement.innerHTML = selectItems[i];
    eles[i].appendChild(myElement.cloneNode(true));
}

方案2：提前保存初始集合长度

先获取初始的.select元素数量，循环时用这个固定值作为终止条件：

const myElement = document.createElement("div");
let selectItems = data.map((select, i) => (
    `<div class="select">
        <div aria-required="true" class="selectBtn" data-type="">${select.placeholder}</div>    
            <div class="selectDropdown">${select.option.map(el =>
                    `<div class="option" data-type="firstOption">${el}</div>`
            ).join('')}
        </div>
    </div>`)
)

const eles = document.getElementsByClassName("select");
// 保存初始长度，避免动态变化
const initialCount = eles.length;
for (let i = 0; i < initialCount; i++) {
    myElement.innerHTML = selectItems[i];
    eles[i].appendChild(myElement.cloneNode(true));
}

额外建议

另外注意：你当前的逻辑是把新的.select元素嵌套到已有.select内部，这可能不符合预期。如果你的目标是把生成的.select添加到页面其他容器（比如某个父盒子），建议直接选择那个父容器，避免嵌套.select元素，也能从根源避免动态集合长度变化的问题。

内容的提问来源于stack exchange，提问作者Андрей Калиниченко