Quiero crear una identificación para cada div de visualización de libros porque quiero que bookOne, bookTwo, bookThree y bookFour tengan sus propios contenedores. En este momento, textNode se ejecuta a través de cada div y quiero que cada div esté separado. Podría haber creado divs dentro de HTML pero quiero hacerlo dinámicamente dentro de 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) }); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./styles/style.css"> <title>Document</title> </head> <body> <div class="myLibrary"> <div class="booksContainer"> </div> </div> <script src="./scripts/script.js"></script> </body> </html>¿Quieres decir que quieres la identificación en la etiqueta html? ¿Por qué no usar el ciclo que ya tiene y usar el índice como identificación?
Además, no es necesario crear una variable para cada libro, solo colóquelos directamente en una matriz:
const booksContainer = document.getElementById('booksContainer'); const myLibrary = [ { imageUrl: '', title: 'Title:' + ' ' + 'Armageddon: The Battle for Germany, 1944-1945', author: 'Author:' + ' ' + 'Max Hastings', pages: 'Pages:' + ' ' + '672' }, { imageUrl: '', title: 'book 2', author: '', pages: '' }, { imageUrl: '', title: 'book 3', author: '', pages: '' }, { imageUrl: '', title: 'book 4', author: '', pages: '' } ]; myLibrary.forEach((book, index) => { let booksDisplay = document.createElement('div'); booksDisplay.setAttribute('class', 'booksDisplay') booksDisplay.setAttribute('id', `booksDisplay${index + 1}`); let booksDisplayText = document.createTextNode(`${book.title}: ${book.author}: ${book.pages}`); booksDisplay.appendChild(booksDisplayText); booksContainer.appendChild(booksDisplay); });Crear var counter = 0; fuera de su forEach .
Luego, debe agregar solo una línea de código: console.log(booksDisplay.id = 'customId' + (++counter)) .
Nota: console.log está ahí solo para aclaración.
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] var counter = 0; myLibrary.forEach((book, index) => { let booksDisplay = document.createElement("div") booksDisplay.setAttribute('class', 'booksDisplay') console.log(booksDisplay.id = 'customId' + (++counter)) let booksDisplayText = document.createTextNode(`${bookOne.title}: ${bookOne.author}: ${bookOne.pages}`); booksDisplay.appendChild(booksDisplayText) booksContainer.appendChild(booksDisplay) }); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./styles/style.css"> <title>Document</title> </head> <body> <div class="myLibrary"> <div class="booksContainer"> </div> </div> <script src="./scripts/script.js"></script> </body> </html>