如何为JavaScript动态创建innerHTML的元素添加唯一ID与专属内容

现有如下JavaScript代码，通过循环数组动态创建卡片元素并插入innerHTML内容：

const showsToTry = [
    './assets/cards/7.jpg',
    './assets/cards/8.jpg',
    './assets/cards/9.jpg',
    './assets/cards/10.jpg',
    './assets/cards/11.jpg',
    './assets/cards/12.jpg',
]

const showsToTrySection = document.querySelector('#shows-to-try')
showsToTry.forEach(song => {
    const showsToTrySongs = document.createElement('div')
    showsToTrySongs.className = 'card hp-subhero-card col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2'
    showsToTrySongs.innerHTML = ` 
       <img src="${song}" class="card-img-top pt-2 img-fluid" alt="...">
        <div class="card-body">
            <p class="hp-subhero-title">Purple Rain</p>
            <p class="hp-subhero-subtitle">Another song from my soul</p>
        </div>`
    showsToTrySection.appendChild(showsToTrySongs)
})

现需为每张图片对应的元素添加唯一ID，并为每个卡片设置专属的标题与副标题等内容，请问该如何实现？

解决方案 #

核心是把原数组从单纯的图片路径，改成包含完整卡片信息的对象数组，同时利用循环的索引值生成唯一ID，让每个卡片的专属内容和元素一一绑定。

修改后的代码 #

// 重构数组，每个元素存储卡片的完整信息
const showsToTry = [
    {
        imgUrl: './assets/cards/7.jpg',
        cardId: 'song-card-1',
        imgId: 'song-img-1',
        title: 'Purple Rain',
        subtitle: 'Another song from my soul'
    },
    {
        imgUrl: './assets/cards/8.jpg',
        cardId: 'song-card-2',
        imgId: 'song-img-2',
        title: 'Bohemian Rhapsody',
        subtitle: 'A timeless rock opera'
    },
    {
        imgUrl: './assets/cards/9.jpg',
        cardId: 'song-card-3',
        imgId: 'song-img-3',
        title: 'Billie Jean',
        subtitle: 'King of Pop\'s iconic hit'
    },
    {
        imgUrl: './assets/cards/10.jpg',
        cardId: 'song-card-4',
        imgId: 'song-img-4',
        title: 'Smells Like Teen Spirit',
        subtitle: 'Grunge revolution anthem'
    },
    {
        imgUrl: './assets/cards/11.jpg',
        cardId: 'song-card-5',
        imgId: 'song-img-5',
        title: 'Hey Jude',
        subtitle: 'Beatles\' heartfelt classic'
    },
    {
        imgUrl: './assets/cards/12.jpg',
        cardId: 'song-card-6',
        imgId: 'song-img-6',
        title: 'Hotel California',
        subtitle: 'Eagles\' mysterious masterpiece'
    }
]

const showsToTrySection = document.querySelector('#shows-to-try')
showsToTry.forEach((cardData) => {
    const card = document.createElement('div')
    card.className = 'card hp-subhero-card col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2'
    // 给卡片容器设置唯一ID
    card.id = cardData.cardId
    
    card.innerHTML = ` 
        <img src="${cardData.imgUrl}" id="${cardData.imgId}" class="card-img-top pt-2 img-fluid" alt="${cardData.title}">
        <div class="card-body">
            <p class="hp-subhero-title">${cardData.title}</p>
            <p class="hp-subhero-subtitle">${cardData.subtitle}</p>
        </div>`
    showsToTrySection.appendChild(card)
})

关键改动说明 #

1. 重构数组结构：将每个元素改为对象，包含图片路径、卡片ID、图片ID、标题、副标题，让数据和视图完全对应，便于维护。
2. 添加唯一ID：分别给卡片容器和图片元素设置自定义的唯一ID，也可以用循环的index参数自动生成（比如card-${index+1}），两种方式按需选择。
3. 绑定专属内容：在模板字符串中通过${cardData.title}、${cardData.subtitle}调用对象中的专属内容，替换原有的固定文本，实现每张卡片内容个性化。

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