No puedo entender lo que estoy haciendo mal.
Este código funciona bien:
pic.forEach(photo => { const newDiv = document.createElement("div"); newDiv.className = 'photo'; newDiv.innerHTML = `<img src=${photo.urls.small}>` document.body.appendChild(newDiv);pero quiero anidar este nuevo Div dentro de uno existente, así que preparé DIV con fotos de clase.
const pic = result.results; pic.forEach(photo => { const gallery = document.getElementsByClassName('photos'); const newDiv = document.createElement("div"); newDiv.className = 'photo'; newDiv.innerHTML = `<img src=${photo.urls.small}>` gallery.appendChild(newDiv);y este no funciona.
La función getElementsByClassName devolverá un Array , un HTMLCollectionOf<Element> , por eso, llamar directamente a appendChild no funcionará, tiene algunas opciones en este caso. Recorra todos los Elementos, pero parece ser solo uno.
const gallery = document.getElementsByClassName('photos')[0]; // Both will get only the first Element that matches const gallery = document.querySelector('.photos');Ahora puede agregar el nuevo Elemento.