如何通过For循环向DOM的多个指定区域渲染随机敌人信息？

需要创建循环，向DOM中类名为firstEnemy、secondEnemy、thirdEnemy的三个div分别渲染随机敌人信息，避免重复代码，同时支持不同等级敌人。原循环代码存在问题，无法实现需求。

原单个渲染代码：

let loadEnemies = document.querySelector(".firstEnemy");
loadEnemies.innerHTML = 
    '<p>Name: '+randomLowEnemy.name+'</p>' +
    '<p>Health: '+randomLowEnemy.health+'</p>'

原循环代码：

let enemy;

function Enemy(rank, name, img, health, attack, speed){
    this.rank = rank;
    this.name = name;
    this.img = img;
    this.health = health;
    this.attack = attack;
    this.speed = speed;
};


//Ranking will go from E, C, D, B, A, S and follow 1, 2, 3, 4, 5, 6

let goblin = new Enemy(1,"Goblin", 50, 5, 10);
let centipede = new Enemy(2 ,"Giant Desert Centipede", 100, 15, 5);
let jackal = new Enemy(2, "Dungeon Jackal", 75, 10, 15);

const lowRankEnemies = [ goblin, centipede, jackal]; 
let randomLowEnemy = lowRankEnemies[Math.floor(Math.random() * lowRankEnemies.length)];

console.log(randomLowEnemy);

let loadLowEnemies = 3;
for(let i =0; i < loadLowEnemies; i++){
    let loadEnemies = document.querySelector(".firstEnemy");
    loadEnemies.innerHTML = 
        '<p>Name: '+randomLowEnemy.name+'</p>' +
        '<p>Health: '+randomLowEnemy.health+'</p>'
}

原代码核心问题：

• 循环中始终选中同一个.firstEnemy元素，导致只有第一个div被修改
• randomLowEnemy仅生成一次，即使选中不同元素，渲染的也是同一个敌人
• 未抽离渲染逻辑，后续扩展不同等级敌人时会产生冗余代码

// 保留Enemy构造函数和敌人数据
function Enemy(rank, name, img, health, attack, speed){
    this.rank = rank;
    this.name = name;
    this.img = img;
    this.health = health;
    this.attack = attack;
    this.speed = speed;
};

let goblin = new Enemy(1,"Goblin", 50, 5, 10);
let centipede = new Enemy(2 ,"Giant Desert Centipede", 100, 15, 5);
let jackal = new Enemy(2, "Dungeon Jackal", 75, 10, 15);

const lowRankEnemies = [ goblin, centipede, jackal]; 

// 1. 定义所有敌人容器的类名数组
const enemyContainerClasses = [".firstEnemy", ".secondEnemy", ".thirdEnemy"];

// 2. 抽离渲染单个敌人的函数，方便复用（支持不同等级敌人）
function renderEnemy(containerSelector, enemyList) {
    const container = document.querySelector(containerSelector);
    if (!container) return; // 避免DOM元素不存在时报错
    
    // 每次渲染都生成新的随机敌人
    const randomEnemy = enemyList[Math.floor(Math.random() * enemyList.length)];
    container.innerHTML = `
        <p>Name: ${randomEnemy.name}</p>
        <p>Health: ${randomEnemy.health}</p>
    `;
}

// 3. 循环遍历容器数组，逐个渲染
enemyContainerClasses.forEach(selector => {
    renderEnemy(selector, lowRankEnemies);
});

• 将三个容器的类名存入数组，通过forEach循环遍历，避免重复选择元素
• 抽离renderEnemy函数，参数接收容器选择器和敌人列表，后续渲染其他等级敌人时，只需传入对应敌人数组即可
• 每次调用renderEnemy时重新生成随机敌人，确保每个容器的敌人独立随机
• 使用模板字符串（`）替代字符串拼接，代码更易读维护

内容的提问来源于stack exchange，提问作者Alejandro Garcia Baltazar