本文旨在指导开发者如何在 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 = ` ${song.idd} @@##@@ ${song.songName} N${song.artist} play_arrow `; 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 = ` @@##@@ Me,Myself & I G-easy`}
代码解释：
立即学习“Java免费学习笔记（深入）”；
数据准备： 首先，准备一个包含元素信息的数组 goodVibesPlaylist。每个对象包含 img, idd, songName, audio, 和 artist 属性。idd 属性将用于元素的 ID。
循环生成 HTML 字符串： 使用 for…of 循环遍历数组，为每个对象创建一个包含 ID 的 HTML 字符串。关键在于
插入到 DOM 中： 使用 document.querySelector(‘#addTo’).innerHTML = songsHTML; 将生成的 HTML 字符串插入到 ID 为 addTo 的元素中。
获取动态元素: 确保在元素被添加到DOM之后再获取他们，使用 document.querySelectorAll 获取所有动态创建的 .song-details 元素。querySelector 只会返回匹配的第一个元素。
注意事项
确保 ID 唯一性： 在生成 ID 时，务必确保其在整个文档中的唯一性。可以使用递增的数字、时间戳或 UUID 等方式生成唯一 ID。DOM 加载完成： 确保在 DOM 加载完成后再执行 JavaScript 代码，避免因元素尚未加载而导致无法获取的情况。可以将 JavaScript 代码放在
以上就是JavaScript 教程：动态创建元素并赋予ID的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1511200.html
微信扫一扫 
支付宝扫一扫 
