JavaScript 教程：动态创建元素并赋予ID-js教程-PHP中文网

JavaScript 教程：动态创建元素并赋予ID

花韻仙語

发布： 2025-07-18 18:42:01

原创

634人浏览过

javascript 教程：动态创建元素并赋予id

本文旨在指导开发者如何在 JavaScript 中动态创建 HTML 元素，并通过 innerHTML 方法将它们添加到文档中，并为这些动态创建的元素赋予唯一的 ID，以便后续进行操作和事件绑定。文章将结合实际代码示例，详细讲解实现步骤和注意事项，帮助读者掌握这一常用技巧.

动态创建元素的 ID 赋值

在 JavaScript 中，当需要动态生成大量相似的 HTML 元素时，使用 innerHTML 是一种常见的方法。同时，为了方便后续对这些元素进行操作，为它们赋予唯一的 ID 是非常重要的。以下示例展示了如何实现这一目标。

示例代码：

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 Puto',

  }
]

let songsHTML = '';

for (let song of goodVibesPlaylist) {
  const html = `
   <div class="song-details" id="${song.idd}"> 
    <div class="song-num " >${song.idd}</div>
    <div class="song-poster"><img src=${song.img} alt=""></div>
    <div class="song-artist-name">
        <div class="song-name">${song.songName}</div>
        <div class="artist-name">N${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;

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

for (let song of btns) {

  playingNow.innerHTML = ` <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>`

}

登录后复制

代码解释：

立即学习“Java免费学习笔记（深入）”；

数据准备： 首先，准备一个包含元素信息的数组 goodVibesPlaylist。每个对象包含 img, idd, songName, audio, 和 artist 属性。idd 属性将用于元素的 ID。

腾讯元宝
腾讯混元平台推出的AI助手

223

查看详情
循环生成 HTML 字符串： 使用 for...of 循环遍历数组，为每个对象创建一个包含 ID 的 HTML 字符串。关键在于 <div class="song-details" id="${song.idd}"> 这行代码，它将 song.idd 的值动态插入到 id 属性中。
插入到 DOM 中： 使用 document.querySelector('#addTo').innerHTML = songsHTML; 将生成的 HTML 字符串插入到 ID 为 addTo 的元素中。
获取动态元素: 确保在元素被添加到DOM之后再获取他们，使用 document.querySelectorAll 获取所有动态创建的 .song-details 元素。querySelector 只会返回匹配的第一个元素。

注意事项

确保 ID 唯一性： 在生成 ID 时，务必确保其在整个文档中的唯一性。可以使用递增的数字、时间戳或 UUID 等方式生成唯一 ID。
DOM 加载完成： 确保在 DOM 加载完成后再执行 JavaScript 代码，避免因元素尚未加载而导致无法获取的情况。可以将 JavaScript 代码放在 </body> 标签之前，或者使用 DOMContentLoaded 事件监听器。
性能考虑： 当需要创建大量元素时，频繁操作 innerHTML 可能会影响性能。可以考虑使用 document.createElement 和 appendChild 等方法进行优化。
事件委托： 对于动态创建的元素，可以使用事件委托来绑定事件，避免为每个元素单独绑定事件，提高性能。