如何向.forEach循环中创建的每个div元素添加ID?

巴西世界杯梅西

我想为每个booksDisplay div创建一个ID,因为我希望bookOne、bookTwo、bookThree和bookFour有它们自己的容器。现在,textNode在每个div中运行,我希望每个div被分开。我本可以在HTML中创建div,但是我想在javascript中动态地创建它。

代码语言:javascript复制const booksContainer = document.querySelector('.booksContainer');

const book = {

title: '',

author: '',

pages: '',

imageUrl: '',

}

const bookOne = {

imageUrl: '',

title: 'Title:' + ' ' + 'Armageddon: The Battle for Germany, 1944-1945',

author: 'Author:' + ' ' + 'Max Hastings',

pages: 'Pages:' + ' ' + '672'

}

const bookTwo = {

imageUrl: '',

title: '',

author: '',

pages: ''

}

const bookThree = {

imageUrl: '',

title: '',

author: '',

pages: ''

}

const bookFour = {

imageUrl: '',

title: '',

author: '',

pages: ''

}

let myLibrary = [bookOne, bookTwo, bookThree, bookFour]

myLibrary.forEach((book, index) => {

let booksDisplay = document.createElement('div')

booksDisplay.setAttribute('class', 'booksDisplay')

let booksDisplayText = document.createTextNode(`${bookOne.title}: ${bookOne.author}: ${bookOne.pages}`);

booksDisplay.appendChild(booksDisplayText)

booksContainer.appendChild(booksDisplay)

});代码语言:javascript复制

Document

[艺术里的奥林匹克]马球+冰雪 热血沸腾的冬季运动
健康快乐