這是代碼：
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}" alt="如何將id添加到由javascript創建的innerhtml">
<div >
<p >Purple Rain</p>
<p >Another song from my soul</p>
</div>`
showsToTrySection.appendChild(showsToTrySongs)
})
我想為這個陣列中的每張圖片添加一個唯一的 id 和一個唯一的內容。我該怎么做？非常感謝
uj5u.com熱心網友回復：
您可以將回圈中的陣列索參考作 id 的不同部分。
showsToTry.forEach((song, i) => {
/* ... */
showsToTrySongs.id = `song_${i}`
/* ... */
}
這將給出"song_0"-"song_5"
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, i) => {
const showsToTrySongs = document.createElement('div')
showsToTrySongs.id = `song_${i}`
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}" alt="如何將id添加到由javascript創建的innerhtml">
<div >
<p >Purple Rain</p>
<p >Another song from my soul</p>
</div>`
showsToTrySection.appendChild(showsToTrySongs)
})<div id="shows-to-try">
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/524371.html
上一篇：在HTML中呼叫php腳本的問題
下一篇：PHP確實包含繼承命名空間