我想为每个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复制
[艺术里的奥林匹克]马球+冰雪 热血沸腾的冬季运动健康快乐