如何使用JavaScript将数组每个元素分别追加到对应的div元素中

核心逻辑 #

你只需要遍历数组，按索引匹配对应的.append-div元素写入内容即可，这里给你提供兼容边界情况的实现：

let numbers = ['1', '2'];
var appendDiv = document.getElementsByClassName('append-div');

var addBtn = document.querySelector('.add-btn');
addBtn.addEventListener('click', function() {
    // 遍历数组，按索引对应插入
    for (let i = 0; i < numbers.length; i++) {
        // 加一层判断避免数组长度和div数量不匹配时报错
        if (appendDiv[i]) {
            // 覆盖原有内容用=，每次点击追加内容用+=
            appendDiv[i].textContent = numbers[i];
            // 如果需要插入HTML内容可以改用innerHTML，纯文本优先用textContent避免XSS风险
            // appendDiv[i].innerHTML = numbers[i];
        }
    }
});

可选优化说明 #

• 如果要实现多次点击重复追加内容，把textContent =改成textContent +=即可，也可以根据需要加空格、换行等分隔符
• 如果数组内容是动态的，建议每次点击前先统一清空原有.append-div的内容，避免冗余内容残留
• 如果你的场景确定数组长度和.append-div数量永远一致，可以去掉索引存在的判断简化代码

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