如何给JavaScript中innerHTML创建的元素添加ID并实现歌曲点击播放

原代码核心问题 #

• 提前获取元素时机错误：querySelector('.song-details')在动态歌曲元素插入DOM前执行，无法获取到目标元素，后续事件绑定完全无效。
• 事件逻辑缺失：循环代码仅直接修改播放器内容，未添加点击事件监听，也未实现点击歌曲匹配对应数据的逻辑。
• HTML模板错误：模板字符串中的//here how I tried to give IDs会被当作无效文本插入DOM，破坏结构；艺术家名称前多了无效的N前缀。
• 冗余代码：const elemt = document.createAttribute未完成且无实际作用，属于无效代码。

修正后的完整代码 #

HTML部分

<div class="playlist-songs" id="addTo"></div>

<div class="song-p-now">
  <div class="song-poster"><img src="img/7.jpg" alt="" /></div>
  <div class="song-artist-name">
    <div class="song-name">Me,Myself & I</div>
    <div class="artist-name">G-easy</div>
  </div>
</div>

JavaScript部分

const playlistSongs = document.querySelector(".playlist-songs");
const playingNow = document.querySelector('.song-p-now');

const goodVibesPlaylist = [
  {
    img: 'img/2.jpg',
    idd: 1,
    songName: 'Am I Wrong',
    audio: new Audio('audio/Am-I-wrong.mp3'),
    artist: 'Nico & Vinz',
  },
  {
    img: 'img/3.jpg',
    idd: 2,
    songName: 'Sex,Drugs,Etc',
    audio: new Audio('audio/Sex-Drugs-Etc.mp3'),
    artist: 'Beach Weather',
  },
  {
    img: 'img/7.jpg',
    idd: 3,
    songName: 'Me Myself & I ',
    audio: new Audio('audio/Me-Myself-I.mp3'),
    artist: 'G-easy',
  },
  {
    img: 'img/4.jpg',
    idd: 4,
    songName: 'Blood In The Water',
    audio: new Audio('audio/Blood-In-The-Water.mp3'),
    artist: 'grandson',
  },
  {
    img: 'img/5.jpg',
    idd: 5,
    songName: 'Eastside',
    audio: new Audio('audio/Eastside.mp3'),
    artist: 'Benny Blanco',
  },
  {
    img: 'img/6.jpg',
    idd: 6,
    songName: 'Everything Black ',
    audio: new Audio('audio/Everything-Black.mp3'),
    artist: 'Unlike Pluto',
  }
];

// 生成歌曲列表HTML
let songsHTML = '';
for (let song of goodVibesPlaylist) {
  const html = `
   <div class="song-details" data-song-id="${song.idd}">
    <div class="song-num ">${song.idd}</div>
    <div class="song-poster"><img src="${song.img}" alt="${song.songName}" /></div>
    <div class="song-artist-name">
        <div class="song-name">${song.songName}</div>
        <div class="artist-name">${song.artist}</div>
    </div>
    <div class="play-btn"><span class="material-symbols-outlined">play_arrow</span></div>
    </div>`;
  songsHTML += html;
}

document.querySelector('#addTo').innerHTML = songsHTML;

// 事件委托绑定点击事件（支持动态元素）
playlistSongs.addEventListener('click', function(e) {
  const songElement = e.target.closest('.song-details');
  if (!songElement) return;
  
  const songId = parseInt(songElement.dataset.songId);
  const selectedSong = goodVibesPlaylist.find(song => song.idd === songId);
  
  if (selectedSong) {
    // 更新播放器显示内容
    playingNow.innerHTML = `
      <div class="song-poster"><img src="${selectedSong.img}" alt="${selectedSong.songName}" /></div>
      <div class="song-artist-name">
          <div class="song-name">${selectedSong.songName}</div>
          <div class="artist-name">${selectedSong.artist}</div>
      </div>`;
    
    // 可添加播放逻辑：暂停其他音频，播放当前歌曲
    // goodVibesPlaylist.forEach(song => song.audio.pause());
    // selectedSong.audio.play();
  }
});

关键改动说明 #

1. 替换ID为自定义数据属性：用data-song-id替代直接绑定ID，避免ID冲突，同时更灵活。
2. 事件委托机制：在父容器上绑定点击事件，无需给每个歌曲单独绑定，自动适配动态生成的元素。
3. 修正DOM操作时机：在生成并插入歌曲HTML后再处理事件绑定，确保能获取到所有目标元素。
4. 修复模板错误：移除无效注释，修正艺术家名称前缀，给图片添加合理的alt属性。
5. 数据匹配逻辑：通过find方法根据歌曲ID快速定位数据对象，实现点击后同步播放器信息。

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